Hello! I’m trying to get it so the red and blue boxes are seperate (currently it looks like the red box is inside the blue one). This code is for the tribute page challenge.
I’ve been messing around with indentations, but can’t figure it out - I’d rather not use flexbox or grid for the basic solution (unless it’s neccessary); I’ll add flexbox later in my project so I can get used to it.
Thank you! 
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tribute-styles.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Noto+Sans&display=swap" rel="stylesheet">
<title>Page</title>
</head>
<body>
<div id= "main">
<div id="main-section" class="main-border">
<h1 id="title">Richard Dawkins</h1> <!--Richard Dawkins title -->
<div id="img-div">
<img id="image" class="img-border" src="https://pbs.twimg.com/profile_images/1094327574031945729/tU8wz8DL_400x400.jpg" alt="A picture of Richard Dawkins in nature">
<p id="img-caption"><i>Richard Dawkins in nature </i></p>
</div>
<div id="info">
<p id="tribute-info"> Richard Dawkins is a famous biologist
and evolutionist.
He his probably most famous for his books,
including <i>The God Delusion</i> and<i>The Selfish Gene</i>, and is critical
of the idea of intelligent design and creationism; frequently
discussing these topics during his debates and books. </br>
Intrestingly, he invented the term 'meme', in <i>The Selfish Gene</i>.
</p>
</div>
<div id="more-info">
<p><strong>For more information, visit his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Richard_Dawkins" target="_blank">Wikipedia Page.</a></strong></p>
</div>
</div>
</body>
</html>
CSS code:
#main-section {
background-color: blue;
width: 80%;
margin: 50px;
padding: 50px 20px 50px 20px;
}
#more-info{
background-color: red;
padding: 50px 20px 50px 20px;
margin: 50px;
}
img{
max-width: 100%;
display: block;
height: auto;
margin: auto;
padding-top:
}
.img-border {
border-color: black;
border-width: 2px;
border-style: solid;
}
#img-caption {
margin: auto;
text-align: center;
}
a{
color: blue;
}
a:hover{
animation-name: link-color;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes link-color {
100%{
color: red;
}
}
p{
font-family: Noto Sans, sans-serif;
}
h1{
font-family: Bebas Neue, sans-serif;
text-align: center;
font-size: 75px;
padding: 5px 0px 2px 0px;
margin: 10px auto auto 5px
}