Why are two DIV elements losing their 100% width in the CSS when the browser is resized?
Any suggestions on how to fix this issue would be greatly appreciated.
Thank you,
HTML
<div class="featured">
<h1>Name <span class="desc">This is a sample</span></h1>
</div>
<div class="aquabar">
<div class="aquacont">
Sample Description
<h2>Some more information that is applicable</h2>
</div>
</div>
CSS
.featured {
width: 100%
height: 400px;
background-image: url("../img/featured-image.jpg");
text-transform: uppercase;
padding: 40 0 0 0;
}
.aquabar {
width: 100%
height: 100px;
background-image: url("../img/featured-bg.jpg");
background-color: #49aca9;
margin: -30px 0 30px 0;
}