bootstrap padding and margin issues

Question

Im using bootstrap grid to build a responsive menu and a section that has a search form.But I dont understand why there are some issues in the layout relative to margins and paddings as you can see here: http://jsfiddle.net/ya08jsfy/1/.

• In the header area the logo h1 is not aligned vertically at center.

• Then there is a white space between the header area and the search section, do you know why? Adding some padding to the .Search div seems to solve this, but why the padding is needed? Why the .Search div by default dont appears next to the header?

• Then in the search form I want the input next to the button wihout any space but its not working and also, even with box-sizing:border-box, the input is not occupying the full width because the yellow background appears.

Do you know how to fix this in a way that work in another sections so the content is aligned at center with the same padding in all sections.

html:

<header>
    <div class="container">
     <div class="row">
        <div class="header_nav">
            <div class="col-xs-6 col-sm-3">
                <h1 class="header__logo">Logo</h1>
            </div>
            <div class="col-xs-6 col-sm-9">
                <a class="nav_mobile_btn hidden-sm hidden-md hidden-lg"><i class="fa fa-bars" aria-hidden="true"></i></a>
                <ul class="nav hidden-xs">
                    <li class="nav__item"><a href="">Item 1</a></li>
                    <li class="nav__item"><a href="">Item 2</a></li>
                    <li class="nav__item"><a href="">Item 3</a></li>
                    <li class="nav__item"><a href="">Item 1</a></li>
                    <li class="nav__item"><a href=""> Item 4</a></li>
                </ul>
            </div>
        </div>
     </div>
   </div>
</header>

<section class="Search">
  <h1>Search</h1>
  <form action="/signup" method="post">
    <div class="row">
        <p class="col-xs-10" style=background:yellow;>
            <input type="text" name="first_name">
        </p>
        <p class="col-xs-2">
            <button type="submit">Search</button>
        </p>
    </div>
  </form>
</section>

CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input,textarea,select{
  display: block;
  padding: 15px;
  width: 100%;
  outline: 0;
  border: 0;
}

header{
  border-bottom: 1px solid red;
  background-color:orange;
}

.header_nav {
  display: flex;
  align-items: center;
}

.header__logo{
  color:green;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav__item {
  padding: 0 15px;
  a {
    font-weight: 600;
    font-size: em(15px);
    color: brown;

    &:hover {
      text-decoration: none;
    }
  }
  &:last-of-type{
    padding-right: 0;
  }
}

.nav_mobile_btn{
  font-size: em(30px);
  color:$greypp;
  float: right;
}

.Search{
  background-color: green;
  h1{
    color: #fff;
    text-align: center;
    font-size: 1em;
  }
}

button{padding:15px;}

Answer 1

1. It causes that h1(Logo) to have a different margin on top and bottom. The solution is simple, just set the same margin for both.

   h1{
       margin-top:0px;
       margin-bottom:0px
   }
   

2. The gap between header area and search section comes from the margin of h1(Search). The solution is to set the margin of that h1(Search) to zero.

   h1{
       margin-top:0px;
   }
   

3. It causes bootstrap to set every column to have a padding of 15px on both left and right side. The solution is to override bootstrap style:

    [class*="col-"]{
        padding:0px;
   

If you don't want to override all bootstrap columns, create your own class then.

Answer 2

Bootstrap css comes with some default margins and paddings to tags like h1 to h6 and p. In your case h1 has a margin top of 20px and bottom of 10px thats why logo is not vertically aligned. You can set headings and paragraphs margin to 0 and override bootstrap styles.

For proper alignment and sizing of buttons inside inputs use this code instead.

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>