MarocCoder MarocCoder -3 years ago 60
CSS Question

Content not within div

I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.

HTML

<div id="forecastDiv">

<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>

<p id="forecast0TempC">0
</p>

<p id="day0">Test
</p>
</div>

<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>

<p id="forecast1TempC">0
</p>

<p id="day1">Test
</p>
</div>

<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>

<ul id="forecast2TempC">0
</ul>

<ul id="day2">Test
</ul>
</div>

<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>

<ul id="forecast3TempC">0
</ul>

<ul id="day3">Test
</ul>
</div>

<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>

<ul id="forecast4TempC">0
</ul>

<ul id="day4">Test
</ul>
</div>

<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>

<ul id="forecast5TempC">0
</ul>

<ul id="day5">Test
</ul>
</div>

</div> <!-- end forecastDiv -->


CSS

#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }


https://codepen.io/mcmaster-99/pen/ybWvyy

Answer Source

add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.

<div class="container" id="forecastDiv">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download