body{
font-family:'Montserrat';
}
.content{
background-color:#d9d9d9;
}
p.dates{
display:inline-block;
font-weight:800;
margin-right:20px;
width:120px;
text-align:center;
margin-top:0;
margin-bottom:0;
}
p.content{
display:inline-block;
text-align:left;
width:85%;
height:50px;
margin-top:0;
margin-bottom:0;
}
</div>
<div class="timeline-content">
<br>
<hr>
<p class="dates">28 June 1971</p>
<p class="content">Elon Reeve Musk was born on June 28, 1971 in Pretoria, South Africa.</p><br><hr>
<p class="dates">1988</p>
<p class="content">Elon moved to Canada when he was 17 to attend Queen's University.</p><br><hr>
<p class="dates">1990</p>
<p class="content">Elon transferred to the University of Pennsylvania, where he received dual bachelor's degrees in Economics and Physics.</p><br><hr>
<p class="dates">1995</p>
<p class="content">He relocated to California to begin a Ph.D. in applied physics and material sciences at Stanford University but left after 2 days to pursue a business career.</p><br><hr>
</div>
</div>
</body>
</html>The content at the bottom of the page with a gray background is what I am referring to.
I am designing this tribute webpage, but I am struggling to eliminate the gap between the gray background and the right side browser boundary in the section that displays details for each date/year.