Content not within div - html

Question

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 1

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">