Este es mi CSS y a continuación pongo la primera parte del HTML. El problema es que al cambiar el ancho de la página se me separan los elementos del banner y el navcontainer
. Quería que no sucediera esto, a poder ser manteniendo las medidas relativas para que sea "responsive".
body{
background-image: url(img/bg.jpg);
padding: 0% 20%;
background-size: 100%;
}
#container{
display:flex;
flex-flow: row wrap;
padding: 0%;
margin: 0%;
justify-content: center;
}
#banner{
background-image: url(img/banner.jpg);
background-size: 100%;
background-repeat: no-repeat;
flex-basis: 100%;
height: 11.5em;
flex: 1 100%;
padding-top: 0%;
margin-top: 0%;
}
#banner h1{
text-align: right;
margin-top: 0;
margin-right: 3%;
}
#navcontainer{
background-color: #bc5510;
padding-top: 0%;
margin-top: 0px;
flex: 1 100%;
}
#navcontainer ul{display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 15%;
}
#navcontainer #navlist{
list-style:none;
}
#navlist li a:hover{
color: lightgoldenrodyellow;
background-image: url(img/menu_arrow.gif);
background-repeat: no-repeat;
background-position: 50% 100%;
padding-bottom: 15%;
}
#sidebar{
flex-direction: column;
flex: 1 40%;
margin-left: 4%;
margin-right: 0px;
padding: 0px;
}
#sidebar p, #sidebar form{
max-width: 40%;
}
#content{
flex: 2 45%;
margin-right: 3%;
margin-left: -25%;
padding: 0px;
}
#container-foot{
flex: 1 100%;
margin: 3%;
}
#content h2{
color: chocolate;
}
blockquote{
color:#B29B35;
font-style: oblique;
}
#content a, #footer a{
color:chocolate;
font-weight:bold;
}
ul{
list-style-type:square;
color: chocolate;
}
a{
text-decoration: none;
color: black;
}
.readmore{
background-image: url(img/document.gif);
background-repeat: no-repeat;
background-size: 12%;
padding-left: 3%;
margin-right: 2%;
}
.comments{
background-image: url(img/comment.gif);
background-repeat: no-repeat;
background-size: 12%;
padding-left: 3%;
margin-right: 2%;
}
.date{
background-image: url(img/clock.gif);
background-repeat: no-repeat;
background-size: 12%;
padding-left: 3%;
margin-right: 2%;
}
.info{
color:#B29B35;
}
.post{
border: 1px dashed;
padding: 2%;
}
#sidebar,#content{
padding-top: 3%;
}
<div id="container">
<div id="banner">
<h1>Company Name</h1>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">HOMEPAGE</a></li>
<li id="active"><a id="current" href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>