ロゴの余白が対応しない/リストの表示順がおかしい/ヘッダー背景の接続について（HTML/CSS）

Question

前提・実現したいこと

webサイトを作っています。現在、photoshopでデザインしたのをもとにHTML/CSSでコーディングしているという段階です。

発生している問題・エラーメッセージ

画像の通りのヘッダーにしあげたいのですが今現在プレビューが２枚目のようになっています。

・ロゴの配置が、上下の余白を設定しているのにもかかわらず、下よりになってしまいます
・ヘッダーの背景同士の間に白い余白ができてしまいます
・メニューリストの並び順がおかしなことになってしまいます

自分なりにいろいろと調べてみましたがなかなか解決できません。もしよろしければご教授のほどよろしくお願いいたします。

該当のソースコード

   <header>
        <!--ヘッダーの一番上/ロゴとメニュー-->
<div class="header">
<div class="header-logo">Cebucafe.com</div>
    <div class="header-menu">
        <ol>
        <li a href="">home</li>
        <li a href="">about</li>
        <li a herf="">cafe list</li>
        <li a herf="">profile</li>
        <li a herf="">mail</li>
        </ol>
    </div>
</div>
<!--ヘッダーのニュースインフォ-->
        <div class="header-news">
            <p>INFORMATION 　／　 Cebucafe.comがオープンしました</p>
        </div>
    </header>



CSS

.header{
    background-color:#eff3fd;
    width:100%;
    height:154px;
    color:#4b4b4b;
}

.header-logo{
    font-size:72px;
    font-family:"Puzzled-Regular";
    padding-left:120px;
    padding-top:50px;
    float: left;
}

li{
    list-style: none;
    float: right;
    padding:71px 22px;

}
.header-news{
    height:55px;
    width:100%;
    background-color: #969ca4;
}

.header-news p{
    color:white;
    font-size:14px;
    padding:22px 0 22px 106px;
}

試したこと

ロゴ：大きさの変更や余白を設定しない方法
リスト：ulタグからolタグの変更

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

.header-news p の上marginを0にしましょう。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

---

大きなレイアウト部分でfloatを使用するのは問題が起きやすいのでお勧めしません。また、表示されるデバイスによって文字サイズは変わるため、heightをピクセル指定をするのはよほど決まった場所のみになります。（＝レイアウトには向かない）

flexboxやGridを使った組み方について書かれた入門書などを探してみてください。

Comments

[yurina_web]

ありがとうございます！背景の余白問題解決しました。
floatを使わずに実践してみます。

リストの順番が入れ替わってしまっているのもfloatと使ってしまっているせいでしょうか。

[kei344]

そうです。

[yurina_web]

ありがとうございます！やってみます。

[yurina_web]

おかげさまでflex使って解決できました！ありがとうございます！