I'm trying to get two side-by-side boxes to take up the entire width of the screen. However, when setting the width at 50%, each of the boxes wants to extend about 10px wider than 50%. What am I doing wrong?
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}
#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}
. . .
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
Both sides need to be floated and make sure that you're using
box-sizing: border-box;
to ensure that the width is 50% regardless of padding and border size.