display: flex;を指定するとその要素の位置が左にずれる理由について

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

html5とcss3を用いてwebデザインをもとに模写コーディングをしています。
2つのブロック要素を横並べにしたいため、そのブロック要素の親要素に対してdisplay:flexを指定しましたが、
その親要素の背景が左にずれて、それにつられる様に2つのブロック要素も左にずれてしまいます。
これをずれない様に2つのブロック要素を横並べにさせたいです。

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

「display: flex；を指定後の画像」

「display: flex；を指定前の画像」

該当のソースコード

html5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Bunny!</title>
7    <link rel="stylesheet" href="./styles.css">
8</head>
9<body>
10    <header>
11        <div class="container">
12            <div class="header-left">
13                <img src="./img/logo.png" width="160" height="60" alt="ロゴ">
14            </div>
15            <div class="header-right">
16                <button type="button" class="btn btn-pink">お問い合わせ</button>
17            </div>
18        </div>
19        <div class="clear"></div>
20    </header>
21    <div class="wrapper">
22        <div class="content">
23            <div class="article">
24                <h1>かわいいのは、うさぎ。</h1>
25                <p>うさぎは世界で一番かわいい動物です。どうしてこんなにかわいいのでしょうか？今回はうさぎに癒されながらサイトを作っていきましょう。</p>
26            </div>
27            <button type="button" class="btn btn-pink">うさぎとは?</button>
28            <button type="button" class="btn btn-white">うさぎの可愛さの秘密</button>
29        </div>
30        <div class="thumb">
31            <img src="./img/mv.png" width="600" height="345" alt="背景画像">
32        </div>
33    </div>
34    <footer></footer>    
35</body>
36</html>

css3
1body {
2    margin: 0;
3    padding: 0;
4    font-family: '游ゴシック体';
5}
6
7/* header */
8header {
9    height: 90px;
10    width: 1280px;
11    margin: 0 auto;
12}
13
14.container {
15    width: 1080px;
16    margin: 0 auto;
17}
18
19.header-left {
20    float: left;
21    height: 90px;
22}
23
24.header-left img {
25    padding: 15px 0;
26}
27
28.header-right {
29    float: right;
30}
31
32.header-right {
33    padding: 21px 0 ;
34}
35
36.clear {
37    clear: both;
38}
39
40.btn {
41    border-radius: 28px;
42    padding: 13px 30px 15px;
43    font-size: 20px;
44    line-height: 20px;
45    box-shadow: 3px 3px 10px #00000029;
46}
47
48.btn-pink {
49    background-color: #EC84A0;
50    color: #FFFFFF;
51    font-size: 18px;
52    padding: 15px 30px;
53}
54
55.btn-white {
56    background-color: #FFFFFF;
57    color: #EC84A0;
58    border: 2px solid #EC84A0;
59    font-size: 18px;
60    padding: 15px 30px;
61}
62
63/* wrapper */
64.wrapper {
65    background-image: url(./img/bg.png);
66    background-repeat: repeat;
67    padding-top: 24px;
68    margin: 0 auto;
69    width: 1280px;
70    display: flex; /* 該当箇所 */
71}
72
73.content {
74    width: 422px;
75    height: 250px;
76}
77
78.article {
79    width: 400px;
80}
81
82.article h1 {
83    line-height: 1;
84    font-size: 36px;
85    margin: 0;
86}
87
88.article p {
89    margin: 40px 0;
90}
91

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

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

k_fujimoto

2020/03/15 23:23 編集

提供いただいたソースコードをcodepen( https://codepen.io/Qanji/pen/xxGjRBj )に反映させましたが、おっしゃるような問題は再現しませんでしたね… 問題が発生している環境などを記載していただいたほうが良いかもしれません。

kazuhito0106

2020/03/16 14:50

k_fujimoto 様回答ありがとうございます！横幅を1820px以上にすると左にずれることを確認しました。

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

回答1件

ベストアンサー

画面幅をある程度広げると症状がでますね。

原因は、ヘッダー部分の要素の横並びを、float でしていることだ思われます。
float は後ろの要素のレイアウトに影響を及ぼすので思わぬトラブルの原因になります。
以前は、横並びさせるときに、他に手段がなかったので多用されましたが、
現在ではflexで簡単にトラブルなく横並びにできますのでそれを使用すべきです。

floatは、本来の機能であるテキストの回り込みの設定以外で使う場面はないと思います。

下記のように設定してヘッダーの要素を横並びにして、要素のfloat設定は削除してください。

css
1.container {
2  max-width: 1080px;
3  margin: 0 auto;
4  display: flex; /*横並び*/
5  justify-content: space-between;/*両端揃え*/
6}

floatを使わなければ、
<div class="clear"></div> .clear {clear: both;}
も不要になりますので削除してください。

投稿2020/03/16 00:46

編集2020/03/16 02:43

hatena19

総合スコア33715

kazuhito0106

2020/03/16 15:20

hatena19 様回答ありがとうございます！ divタグでclearクラスを用いたので、ブロック要素(.container)は子要素の高さを認識して、後ろの要素に影響されないと思っていましたが、関係しているんですね。確かに上手く動作することを確認致しました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！