Different renditions on firefox and chrome of search bar - html

Question

Hi I have created the following search bar:
<div class="container-fluid">
<div class="search-bar">
<form class="searchBar">
<div class="row" >
<div class="allElements">
<div class="input-group" >
<span style="color:black" class="input-group-addon">
<select id="selection" onchange="getValues(this.value)">
<option>Choose Category</option>
<option>All</option>
<option>Notary</option>
<option>Deed Date</option>
<option>Person</option>
<option>Place</option>
<option>Register Reference</option>
<option>Subject</option>
</select>
</span>
<div class="autocomplete" style ="width:400px">
<input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="width:400px" disabled=true>
</div>
<span class="input-group-addon" style="color:black"> <button type="button" onclick="doSparql(this.value)">Search</button></span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Where on firefox is rendered perfectly while on the chrome, the search button is on the other side of the screen not grouped with the rest of the search bar as shown in the picture below. Any idea why this is happening and how I can solve it pls?
The css is:
-moz-webkit-margin:0px
html, body {
max-width: 100%;
overflow-x: hidden;
}
.footer-div {
display: inline;
height: 100%;
}
.panel-footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 0px 0px;
background-color: rgba(70,131,172,1);
height: 10%;
max-height: 50px;
border-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
z-index: 100;
}
.container-midvalign
{
height:100%;
padding: 0 0;
vertical-align: middle;
display: inline-table;
text-align: left;
}
.contents-midvalign
{
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
vertical-align:middle;
display: table-cell;
text-align: left;
position: relative
}
.contents-midvalign:hover
{
color: #fff;
text-decoration: underline;
}
.footer-img {
background: url(../media/icons/MALTA_COAT_OF_ARMS_WHITE.png) no-repeat;
height: 100%;
max-height: 50px;
background-size: contain;
position: relative;
padding: 0px 0px;
margin-left: 25px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: middle;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0px;
}
.footer-div
{
display: inline;
height: 100%;
}
.footer-icon
{
font-size: 24px;
padding-right: 25px;
}
.footer-icon:hover
{
text-decoration: none;
}
.bg-gemma
{
background-color: rgba(70,131,172,1) !important;
}
.bg-transparent
{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: 0 0 0 0 rgba(108,117,125,0) !important;
}
.navbar
{
/* height: 10%;*/
min-height: 50px;
/* overflow: hidden;*/
margin: 0 auto;
padding: 0px;
position: fixed;
border: 0px solid transparent;
width: 100%;
background-color: rgba(70,131,172,1);
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
h2{
font-weight: bold;
color: black;
font-size: 40px;
position: relative;
}
#headerdiv {
margin-top: 10px;
margin-bottom: 10px;
}
#fullpagecont
{
padding-left: 25px;
padding-right: 25px;
}
#pheader
{
text-align: center;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
select {
background: transparent;
border: none;
padding: 6px 12px;
}
.input-group-addon {
padding: 0!important;
}
#results{
margin-left: 120px;
margin-right: 120px;
position: relative;
}
.add_data{
margin-left: 150px;
width:20%;
margin-top:5px;
text-align:center;
}
.search-bar{
position: absolute;
left: 35%;
top:130px;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
}
.autocomplete-items {
position: absolute;
text-align: left;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
button {
padding: 6px 12px;
background: transparent;
border: none;
}
.autocomplete-items div {
padding:10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
#div_pagination{
width:100%;
margin-top:5px;
text-align:center;
}
#div_pagination_all{
width:100%;
margin-top:5px;
text-align:center;
}
#pageNo{
text-align:center;
margin-top: 20px;
}
#main-container{
margin-top: 200px;
width:90%;
margin-left: 75px;
}
#details{
margin-top: 25px;
margin-left: 25px;
}
.deedList{
margin-left: 15px;
}
#media (max-width: 575px)
{
.footer-icon
{
padding-right: 10px;
}
.footer-img
{
margin-left: 10px;
}
}

Answer 1

I saw this in chrome:
and this in FF:
To get on the line I added this:
.autocomplete {
position: relative;
display: inline-block;
}