Why doesn’t the red border encompass the 2 links at the bottom?
<html lang="en">
<head>
<title>Messing With Page Layouts</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans+Condensed:ital,[email protected],300&display=swap" rel="stylesheet">
<style>
h1 {
text-align: center;
font-family: 'Indie Flower', cursive;
}
h2 {
text-align: left;
font-family: 'Open Sans Condensed', sans-serif;
}
p {
text-align: justify;
}
.links {
margin: 50px;
}
.overall {
border: 5px solid rgb(187, 76, 76);
border-radius: 15px;
margin: 10px 5px;
padding: 4px;
}
.allwords {
padding: 10px;
}
</style>
</head>
<body>
<div class="overall">
<div class="allwords">
</div>
<h1>Road Construction Equipment</h1>
<h2>Specialized Winter Usage</h2>
<p>But adding to the Canadian aviation sector’s woes as the year winds down is that ground has been lost to international competitors, in large part because there’s been little direct government support in Canada, industry executives say.</p>
</div>
<div>
<a href="https://www.montrealgazette.com/cms/binary/1058422.jpg" target="_blank" class="links">Charles Fipke</a>
<a href="https://okanaganlife.com/gem-guy-chuck-fipke/" target="_blank" class="links">Stewart Blusson</a>
</div>
</div>
</div>
</body>
</html>