Why are my three transparent divs in the center of the page not functioning properly when resizing the screen to md, sm, and xs? The one on the left is offset to the left. How can I make them adaptive? They are meant to be centered next to each other, but when I resize, the one on the left does not take up the entire row. What am I missing?
<div class="container">
<h1 class="text-center ">ZeroDegrees</h1>
<h4 class="text-center">Local Weather Application</h4>
<div id="loc" class="text-center ">Miami FL US</div>
<div id="date" class="text-center"></div>
<div id="icon" class="text-center">ICON</div>
<div class="desc text-center">
<h4>Clear Sky</h4>
</div>
<div id="data" class="row text-center ">
<div id="temp" class="col-lg-2 offset-3 col-xs-12 transparent text-center box ">
Temperature: 89 F
</div>
<div id="hum" class="col-lg-2 col-xs-12 transparent box ">Humidity: 50%
</div>
<div id="wind" class="col-lg-2 col-xs-3 transparent box">Wind: 5mph
</div>
</div>
</div>