Currently, I have styled my website to work perfectly in Firefox, but it's not appearing correctly in Chrome. You can see the layout at . My goal is to maintain the layout as seen in Firefox while also making sure it displays properly in Chrome and IE. It seems that IE is having trouble with the background image set to 100%?
.header {
background-image:url(../images/banner-2.jpg);
background-size:100% auto;
box-shadow:0 0 10px #000;
left:0;
position:fixed;
top:0;
width:100%;
z-index:800;
padding:8px;
}
#wrapper {
max-width:960px;
margin:0 auto;
}
/*BRAND DETAILS*/
.logo {
float:left;
margin-left:30px;
padding-top:10px;
width:8%;
}
.brand-title {
float:left;
padding-left:5px;
padding-top:5px;
width:50%;
}
.brand-subtitle {
float:left;
padding-left:5px;
padding-top:25px;
width:60%;
}
/*SOCIAL BUTTONS*/
.socials {
float:right;
height:80px;
position:relative;
right:0;
top:100px;
width:35%;
z-index:900;
}
.facebook {
float:left;
width:60px;
margin:0px 0px 0px 20px;
}
.pinterest,.blogger,.instagram {
float:left;
width:60px;
margin:0px 0px 0px 50px;
}
/*NAVIGATION*/
.nav-container {
float:right;
position:fixed;
right:40px;
top:145px;
width:60%;
z-index:800;
}