White space between two inputs in a form - html

Question

I`m making a form with this code
HTML
<form id="advanced_search" action="" class="clearfix">
<input type="text" id="check_in_date" placeholder="Check In Date">
<input type="text" id="check_out_date" placeholder="Check Out Date">
<input type="text" id="min_price" placeholder="Min. Price">
<input type="text" id="max_price" placeholder="Max. Price">
<input type="text" id="keywords" placeholder="Keywords">
</form>
CSS
#advanced_search {display: none;}
#advanced_search input
{
width: 30%;
height: 100px;
background: #cbe0f4;
padding-left: 10%;
padding-right: 10%;
border: none;
text-transform: uppercase;
font: 20px 'Lato', sans-serif;
}
input:focus {outline: 0}
input::-webkit-input-placeholder{
color: #95badf;
}
#advanced_search input:last-of-type {
width: 100%
}
#max_price,
#check_out_date {
float: right;
}
#advanced_search
#check_out_date {
background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
background-position: 80% 50%;
}
#advanced_search #check_in_date {
background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
background-position: 80% 50%;
}
But in Google Chrome it have a white line like this between two inputs
What should I do to fix this problem? Thanks
http://2.firepic.org/2/images/2015-11/09/a7knga1law0v.png

Answer 1

The line is caused by the white space between the elements:
<input type="text" id="check_in_date" placeholder="Check In Date"> //white space is here
<input type="text" id="check_out_date" placeholder="Check Out Date">
You can remove it with this style:
#advanced_search input {
float: left;
}
Fiddle

Answer 2

Or if you hate floats you can set a font size 0 on the container div, and display them inline block:
#advanced_search {
font-size: 0;
}
#advanced_search input {
width: 30%;
height: 100px;
background: #cbe0f4;
padding-left: 10%;
padding-right: 10%;
border: none;
text-transform: uppercase;
font: 20px'Lato', sans-serif;
display: inline-block;
}
input:focus {
outline: 0
}
input::-webkit-input-placeholder {
color: #95badf;
}
#advanced_search input:last-of-type {
width: 100%
}
#advanced_search #check_out_date {
background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
background-position: 80% 50%;
}
#advanced_search #check_in_date {
background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
background-position: 80% 50%;
}
<form id="advanced_search" action="" class="clearfix">
<input type="text" id="check_in_date" placeholder="Check In Date">
<input type="text" id="check_out_date" placeholder="Check Out Date">
<input type="text" id="min_price" placeholder="Min. Price">
<input type="text" id="max_price" placeholder="Max. Price">
<input type="text" id="keywords" placeholder="Keywords">
</form>