Navigation is breaking after i put a form input - html

Question

Ok so something wierd is happenning to my page.
I have a navigation bar which looks like this.
Now when I add a form input anywhere in the page, it just suddenly breaks.
Also, it only happens in chrome and is fine in other browsers.
what is causing this?.. I checked all the components and found that if i remove the input box , it becomes fine.
/*Layout*/
.wrapper {
background: red;
max-width: 80em;
/*1280px*/
margin: 0 auto;
}
.header {
background: white;
padding-left: 45px;
/*3.515625%;*/
}
.logo {
float: left;
padding-top: 17px;
/*17px*/
padding-bottom: 16px;
/*16px*/
}
.header-right {
float: right;
}
.navigation {
float: left;
padding: 0 12px;
}
.menu-btn {
float: right;
}
.slider {
height: 590px;
background: grey;
}
img {
display: block;
}
/*style for navigation bar*/
.navigation ul {
list-style: none;
}
.navigation ul li {
float: left;
padding: 0 15px;
background: ;
}
.navigation ul li a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
color: #49443d;
background: url('../images/menu-arrow.png') right center no-repeat;
padding-right: 7px;
line-height: 59px;
}
.navigation ul li a:hover {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.navigation .active a {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.search-menu {
float: left;
width: 57px;
height: 59px;
background: url('../images/search-icon.png') center center no-repeat;
border-left: 1px solid #ededed;
}
.search-menu a {
display: block;
}
.shopping-cart {
float: left;
width: 56px;
background: url('../images/shopping-cart.png') 17px center no-repeat;
border-left: 1px solid #ececec;
border-right: 1px solid #7d7d7d;
}
.cart-item-no {
line-height: 59px;
padding-right: 14px;
float: right;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #575861;
}
.burger-btn {
float: left;
width: 56px;
height: 59px;
background: url('../images/burger-btn.png') center center no-repeat;
background-color: #333333;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
}
<div class="wrapper">
<!-- header starts here-->
<div class="header clrfix">
<div class="logo">
<a href="#">
<img src="images/logo.png">
</a>
</div>
<div class="header-right clrfix">
<div class="navigation">
<ul>
<li class="active">HOME
</li>
<li>PAGES
</li>
<li>BLOG
</li>
<li>PORTFOLIO
</li>
<li>ELEMENTS
</li>
<li>SHOP
</li>
</ul>
</div>
<div class="menu-btn clrfix">
<a href="#">
<div class="search-menu">
</div>
</a>
<a href="#">
<div class="shopping-cart">
<span class="cart-item-no">
0
</span>
</div>
</a>
<a href="#">
<div class="burger-btn">
</div>
</a>
</div>
</div>
</div>
<!-- slider starts here -->
<div class="slider">
<form>
<input type="text" name="email" placeholder="Your email">
</form>
</div>
</div>

Answer 1

You need to add float: left and width: 100% to your header class to achieve what you need. Also you need to remove the padding-left from header class and add padding individually to the logo class to get rid of any bottom scroll issue. Try the below code and let me know everything is working perfectly or not.
/*Layout*/
.wrapper {
background: red;
max-width: 80em;
/*1280px*/
margin: 0 auto;
}
.header {
background: white;
float: left;
width: 100%;
/*3.515625%;*/
}
.logo {
float: left;
padding: 16px;
}
.header-right {
float: right;
}
.navigation {
float: left;
padding: 0 12px;
}
.menu-btn {
float: right;
}
.slider {
height: 590px;
background: grey;
}
img {
display: block;
}
/*style for navigation bar*/
.navigation ul {
list-style: none;
}
.navigation ul li {
float: left;
padding: 0 15px;
background: ;
}
.navigation ul li a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
color: #49443d;
background: url('../images/menu-arrow.png') right center no-repeat;
padding-right: 7px;
line-height: 59px;
}
.navigation ul li a:hover {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.navigation .active a {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.search-menu {
float: left;
width: 57px;
height: 59px;
background: url('../images/search-icon.png') center center no-repeat;
border-left: 1px solid #ededed;
}
.search-menu a {
display: block;
}
.shopping-cart {
float: left;
width: 56px;
background: url('../images/shopping-cart.png') 17px center no-repeat;
border-left: 1px solid #ececec;
border-right: 1px solid #7d7d7d;
}
.cart-item-no {
line-height: 59px;
padding-right: 14px;
float: right;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #575861;
}
.burger-btn {
float: left;
width: 56px;
height: 59px;
background: url('../images/burger-btn.png') center center no-repeat;
background-color: #333333;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
}
Check out this Fiddle for more clarifications.