I'm working on creating a personalized homepage for my browser and I want to display 3 images with captions evenly spaced within a divider. Although everything seems to be in place, the border of the outermost divider is not covering the images. How can I fix this issue? Here is the code I am currently using.
/* Body: */
body {
background-color: #CCCCCC;
}
/* Title: */
#title {
color: #00FFFD;
text-align: center;
font-size: 1000%;
}
/* Main Border: */
#outer_div {
width: 100%;
}
#inner_div {
width: 80%;
margin: auto;
border: 10px groove #000;
}
#main {
border: 40px solid transparent;
}
/* Link Dividers */
.link {
width: 33%;
float: left;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Hub</title>
<link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
<div id="title"><u>Website Hub</u></div>
<div id="outer_div">
<div id="inner_div">
<div id="main">
<div id="row1">
<div class="link">
<a><img src="img/one.png" border="2px"></a>
<caption>One</caption>
</div>
<div class="link">
<a><img src="img/two.jpg" border="2px"></a>
<caption>Two</caption>
</div>
<div class="link">
<a><img src="img/three.jpg" border="2px"></a>
<caption>Three</caption>
</div>
</div>
</div>
</div>
</div>
</body>
</html>