親要素から子要素がはみ出る

前提・実現したいこと

ProgateのHTML/CSSを学習し終えたので、初めてサイトデザインとコーディングをしている者です。
初心者の上divだらけのコードで申し訳ないのですが、ググってもわからないためご指導お願いします。

添付画像の右上のリスト『Menu』『Take out』『Information』が上の青い部分（header）に入らずはみ出て困っています。
これをheaderに収めるにはどうしたらいいのか、ご享受お願いします。
headerのバックはとりあえず青にしてboxが見やすいようにしています。


<DOCTYPE html>
    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>本格インド・ネパール料理</title>
        <link rel="stylesheet" href="main.css">
        <link href="spice_resutaurant_top.css" rel="stylesheet" type="text/css">
        <!-- [if lt IE 9] -->
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </head>
    <header>
        <div class="head_container">
            <div class="header_left">
                <a href="" class="logo">
                    <img src="cmn/logo/logo.png">
                </a>
            </div>
            <div class="header_right">
                <ul class="list_nav_header">
                    <li><a href="">Menu</a></li>
                    <li><a href="">Take&nbsp;out</a></li>
                    <li><a href="">Information</a></li>
                </ul>
            </div>
        </div>
    </header>

@charset "UTF-8";
/* CSS Document */

html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    width: 100%;
}

header {
    width: 100%;
    height: 106px;
    background-color: blue;
    position: fixed;

}



.head_container {
    height: 85px;
    padding: 10px 87px;
}

.header_left {

    color: #A57323;
    box-sizing: border-box;
}


.header_right {

    float: right;
    box-sizing: border-box;
    color: black;

}

.list_nav_header {
    display: flex;
    align-items: center;
    font-family: times;
    float: right;


}

.list_nav_header li {

    padding: 50px 29px;
}

試したこと

ネットで問題を検索したところ『box-sizing:border-box;』をCSSに記述するとあったので
入れてみましたが変わりませんでした。

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

コードエディター：Brackets
ブラウザ：Google Chrome 88.0324.150

行動規範の内容に同意します

回答3件

他の方とも重なりますが

理由のないガチガチの高さ指定・余白の指定はやめる。
floatは使わずflexで。

この2点で解消するとは思います。

まずは横並びなどのレイアウトを実現⇒ 中央寄せ・均等配置などで大まかな場所調整 ⇒ 最後に余白調整　という流れが良いのではないでしょうか。

あとは、htmlの宣言の記述（「!」抜けてませんか）と、bodyタグが無いのが気になりました。

投稿2021/02/18 06:25

mai1210

総合スコア272

CaffeineFree

2021/02/18 10:35

回答いただきありがとうございました！ html宣言の!が無いのと、特にbodyが無いとのご指摘、お恥ずかしい限りです。。

行動規範の内容に同意します

ベストアンサー

現状のコードを活かすなら、.header_left に下記を追加します。これでロゴ画像とメニューが横並びになります。あとは、パディングを調整すればいいでしょう。

css
1.header_left {
2  float: left; /* 追加 */
3  color: #A57323;
4  box-sizing: border-box;
5}

ただし、他の方も指摘してますが、現在ではfloatを使うレイアウトは時代遅れです。CSS Flexboxを使ったレイアウトにした方がシンプルだし融通が効きます。
他の部分ではFlexを使っているので、ここでFlexを使わないのは謎です。

下記でうまくいくと思います。floatの設定は不必要なので削除してください。

css
1.head_container {
2  height: 85px;
3  padding: 10px 87px;
4  display: flex;  /* 横並べ */
5  justify-content: space-between; /* 両端揃え */
6  align-items: center; /* 上下中央寄せ */
7}

投稿2021/02/18 05:41

hatena19

総合スコア34075

CaffeineFree

2021/02/18 10:40

回答ありがとうございます！ Progateでfloatを使っていたので疑わず使っておりました。。記載していただいたCSSで、リストがきちんと収まりました！ flexboxについて調べて活用していきます。

行動規範の内容に同意します

こんにちは。

css
1.list_nav_header li {
2
3    padding: 50px 29px;
4}

とありますので、上下にパディングが50pxずつ付いていますから、最低でも高さ100pxあります。
一方で、

css
1.head_container {
2    height: 85px;
3    padding: 10px 87px;
4}

とあり、.head_containerの高さは85pxしかないのですから、はみ出すのは当然ではないでしょうか。

解決方法の前に、横並びにするのにfloatを使うフロートレイアウトは時代遅れです。
10年前ならともかく、2021年に採用する理由はありませんので、フレックスレイアウトなどを検討してみてください。

解決方法ですが、矛盾しないレイアウト設計をしましょう。小さなボックスに大きなものを納めないように気をつけましょう。

まず、レイアウトのワイヤーフレームやモックを作ってみるのもいいかもしれません。
フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)

投稿2021/02/18 05:25

Lhankor_Mhy

総合スコア36960

CaffeineFree

2021/02/18 10:47

回答ありがとうございます！ heightの設定がおかしいですね。。指摘していただいてようやく気がつくレベルです。。 flexについて調べて活用していこうと思います！デザイナー出なのでデザインから作ってしまいましたが、ワイヤーフレームのみでコーディングした方が早く練習になりそうですね。Cacooを紹介いただきありがとうございました！

行動規範の内容に同意します

あなたの回答