It should actually be slightly less than 100% because setting it at 100% causes the content to be off screen to the right. When I view my page on a tablet or laptop, it zooms into the top left corner of the screen. If I zoom out, I notice that the divs only occupy about half of the page horizontally. I've experimented with min-width but haven't had any success.
.first {
height: 75px;
width: 99.55%;
background-color: red;
margin-top: 19px;
border: 3px yellow solid;
min-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
width: 100%;
}
<div class="animated fadeInUpBig first o">
<h2>Adjust positioning for mobile devices</h2>
</div>
<div class="animated fadeInUpBig first t">
<h2>More updates coming tomorrow evening</h2>
</div>
<div class="animated fadeInUpBig first tr">
<h2>Targeting halfway progress by weekend</h2>
</div>