バナーdivには左右の余白に余白があり、このdivを上記のヘッダーdivよりも少し大きくします

Question

私はメニュー付きのヘッダーdivを持っています。私はバナーdivを持っています。バナーのdivには背景色の赤で検索divがあり、この赤い背景色のこのdivが上記のロゴやメニュー項目と揃っていない理由を理解していません。バナーdivの左側とバナーdivの右側には、このバナーdivが上記のヘッダーdivより少し大きくなるように少しのスペースがあります。なぜこの小さなスペースが現れているのか知っていますか？幅が広がるにつれて空間がより明白になるようです。

CSS：

*, 
*:after, 
*:before { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    outline: 0; 
    border-radius: 0; 
} 

fieldset { 
    border: 0; 
} 




input, 
select, 
textarea, 
button { 
    padding: 15px; 

    width: 100%; 
} 

select, 
input, 
button { 
    border: 0; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer; 
    color:#94a3a8; 

} 

img { 
    width: 100%; 
    max-width: 100%; 
    vertical-align: middle; 
    margin: 0; 
} 

a img { 
    border: none; 
    margin: 0; 
} 

a { 
    text-decoration: none; 
} 

ul { 
    list-style: none; 
    margin:0; 
    padding: 0; 
} 

.container { 
    float: left; 
    width: 100%; 

} 

.content { 
    width: 96%; 
    margin: 0px auto; 
    padding: 30px; 
} 




.Header{ 
    padding: 15px; 
} 

.Header, .main_nav{ 
    display: flex; 
    align-items: center; 
} 

.title{ 
    flex-grow:1; 
} 

.title a{ 
    color:red; 
    font-size: 0.85em; 
} 

.main_nav{ 
    background-color:red; 
} 

.nopaddingright:0; 

.main_nav li{ 
    padding: 0 15px; 
} 

.main_nav a{ 
    font-weight: 700; 
    font-size: 0.85em; 
    color:brown; 
} 

.main_nav a:hover{ 
    color:brown; 
} 

.create{ 
    border:2px solid red; 
    padding: 10px; 
    color:red !important; 
    border-radius: 4px; 
} 

.create:hover{ 
    border:2px solid red; 
    padding: 10px; 
    color:white !important; 
    background-color: red; 
    border-radius: 4px; 
} 


/*************** BANNER *****************/ 

.Banner{ 
    background-color: gray; 
    width: 100%; 

} 

.search{ 
    background-color: red; 
    padding: 30px; 
    border-radius: 4px; 
} 

.input{ 
    background-color: #fff; 
} 

.search select{ 
    background-color: #f8f8f8; 
} 

.search_form{ 
    display: flex; 
    align-items: center; 
    margin: 0; 
    flex-wrap: wrap; 
    font-size: 0; 
} 



.Banner__search_form_element{ 
    flex-grow: 1; 
} 

.Banner__search_form_element_search{ 
    background-color: green; 
    color: white; 
} 

例：あなたが望むレイアウトに近づいのhttp://jsfiddle.net/9ujbyo7b/2/

Answer 1

一つの方法...

*, 
 
*:after, 
 
*:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    outline: 0; 
 
    border-radius: 0; 
 
} 
 

 
fieldset { 
 
    border: 0; 
 
} 
 

 
input, 
 
select, 
 
textarea, 
 
button { 
 
    padding: 15px; 
 
    /*width: 100%;*/ 
 
} 
 

 
select, 
 
input, 
 
button { 
 
    border: 0; 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    cursor: pointer; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
} 
 

 
a img { 
 
    border: none; 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.Header, 
 
.header__inner, 
 
.main_nav, 
 
.Banner { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.header__inner, 
 
.search { 
 
    /* change this value as you need and target it with media queries */ 
 
    width: 90%; 
 
    justify-content: space-between; 
 
} 
 

 
.title a { 
 
    color: $color-primary; 
 
    display: inline-block; 
 
    /* padding: 15px; */ 
 
    font-size: 0.85em; 
 
} 
 

 
.main_nav li { 
 
    padding: 15px; 
 
} 
 

 
.main_nav li:last-of-type { 
 
    padding-right: 0; 
 
} 
 

 
.main_nav { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.main_nav a { 
 
    flex-direction: column; 
 
    font-weight: 700; 
 
    font-size: 0.85em; 
 
    color: gray; 
 
} 
 

 
.create { 
 
    padding: 10px; 
 
    color: red; 
 
    border-radius: 4px; 
 
} 
 

 

 
/** BANNER */ 
 

 
.Banner { 
 
    background-color: gray; 
 
    /* remove the padding to left and right */ 
 
    padding: 30px 0; 
 
} 
 

 
.search { 
 
    background-color: green; 
 
    padding: 30px; 
 
    border-radius: 4px; 
 
    display: flex; 
 
} 
 

 
.search select { 
 
    background-color: #f8f8f8; 
 
} 
 

 
form { 
 
    font-size: 0; 
 
} 
 

 
.search_form { 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
    /* 
 
    align-items: center; 
 
    margin: 0; */ 
 
} 
 

 
.search_form_element { 
 
    flex: 2; 
 
    /* use margin to separate instead if you prefer */ 
 
    border: 1px solid red; 
 
} 
 

 
.search_form_element select, 
 
.search_form_element input { 
 
    width: 100%; 
 
} 
 

 
.search_form_element:last-of-type { 
 
    flex: 1; 
 
}

<header class="Header"> 
 
    <div class="header__inner"> 
 
    <h1 class="title"><a href="">LOGO</a> </h1> 
 
    <ul class="main_nav"> 
 
     <li><a href="">Item 1</a></li> 
 
     <li><a href="">Item 2</a></li> 
 
    </ul> 
 
    </div> 
 
</header> 
 
<div class="Banner"> 
 
    <div class="search"> 
 
    <form class="search_form"> 
 
     <div class="search_form_element"> 
 
     <i class="fa fa-search" aria-hidden="true"></i> 
 
     <input type="search" value="Search"> 
 
     </div> 
 
     <div class="search_form_element"> 
 
     <i class="fa fa-search" aria-hidden="true"></i> 
 
     <select> 
 
      <option selected>Option 1</option> 
 
     </select> 
 
     </div> 
 
     <div class="search_form_element"> 
 
     <i class="fa fa-search" aria-hidden="true"></i> 
 
     <select> 
 
      <option selected>Option 2</option> 
 
     </select> 
 
     </div> 
 
     <div class="search_form_element"> 
 
     <i class="fa fa-search" aria-hidden="true"></i> 
 
     <input type="submit" value="Search"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>