html - Banner div has a litle space on left and right margin which causes this div to be a little larger than the above header div -


i have header div menu , below have banner div. in banner div have search div background-color red , dont understnad why div red background color not aligned logo , menu items above. there little space @ left of banner div , @ right of banner div causes banner div become little larger header div above. know why little space appearing? seems space more evident width increases.

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; }  img {   border: none;   margin: 0; }  {   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; }

example: http://jsfiddle.net/9ujbyo7b/2/

one way of approaching layout want...

*,  *: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;  }    img {    border: none;    margin: 0;  }    {    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 value need , target media queries */    width: 90%;    justify-content: space-between;  }    .title {    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 {    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 padding left , 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 separate instead if 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>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more