Spacing issue with HTML and floats - html

Question

first time poster here. I've been freshing up on my HTML and CSS and I've encountered some small problems.
If you look at the link then you can see some unwanted spacing between the pink colored "My Gaming Life" and the plum colored "My Lack of Religion". Those 2 paragraphs have an id of right and I've set them to float:right as so;
#right {float:right;}
Ive done the same with the elements on the left side like so:
#left {float:left;}
I will put a full list of the code below and a picture of the website:
The CSS:
p {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
ul {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(123, 321, 78, .2);
padding-right: 5ps;
}
li {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
h1, h2, h3, h4, h5, h6 {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
#span1 {
text-decoration: underline;
}
#hello {
margin-top: 1em;
font-size: 3em;
}
#wonder {
font-family: "Poiret One", cursive;
font-weight: bold;
font-size: 2.5em;
}
#mystery {
font-size: 2em;
font-family: "Dancing Script", cursive;
padding-bottom: 5px;
margin-bottom: 15px;
}
.intro {
background-color: rgba(240,230,140, 0.8);
}
.intro p {
color: #000029;
}
#img1 {
width: 75px;
height: 75px;
margin-right: 2px;
margin-bottom: 5px;
}
.img_header {
/*float: left;*/
border: 2px solid #1f2f31;
border-radius: 10px;
background-color: rgba(255,69,0,0.3);
width: 24%;
}
.img_header_container h3 {
padding: 15px;
margin-top: -15px;
margin-bottom: -2px;
}
.picture {
margin-left: 5px;
margin-bottom: 5px;
}
.center {
display: table;
margin: auto;
}
.main_container {
border:0.2em solid #1f2f31;
border-radius: 10px;
background-color: rgba(157, 139, 178, .5);
}
.main_container p {
padding-left: 10px;
}
.list {
width: 24%;
/*float: left;*/
}
.img_header {
width: 24%;
}
.main_content {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(205, 120, 200, .5);
margin-bottom: 5em;
}
.main_content_container {
text-align: center;
padding-bottom: 10px;
}
.main_content_container p {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.main_content_container a {
font-size: 2em;
color: #D6EBFF;
}
.religion {
/*float:right;*/
width: 73%;
border:0.2em solid #1f2f31;
border-radius: 10px;
margin-right: 10px;
margin-top:17px;
background-color: rgba(103, 0, 124, .5);
margin-bottom: 5em;
}
.religion_container {
text-align: center;
padding-bottom: 10px;
}
.religion_container {
font-size: 1.5em;
line-height: 170%;
text-align: left;
padding-left: 10px;
}
.religion_container a {
font-size: 2em;
color: #D6EBFF;
}
#left {
float: left;
}
#right {
float: right;
}
body {
background-image: url("http://orig01.deviantart.net/064f/f/2010/064/6/1/arcane_symbols_by_stinkmeaner.jpg");
background-color: black;
font-size: 100%;
}
The HTML:
<div class="intro">
<div class="intro_container">
<p id="hello", class="center">Content </p>
<p id="wonder", class="center">Content</p>
<p id="mystery", class="center">Content</p>
</div>
</div>
<div class="main">
<div class="main_container">
<p>Content</p>
</div>
<div class="list" id="left">
<div class="list_container">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
</div>
<div class="main_content" id="right">
<div class="main_content_container">
<h2>title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
<div class="img_header" id="left">
<div class="img_header_container">
<h3>Title</h3>
<div class="picture">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
<img src="" id="img1">
</div>
</div>
</div>
<div class="religion" id="right">
<div class="religion_container">
<h2>Title</h2>
<p>Some content</p><br>
Read more!
</div>
</div>
Do you have any clues ?

Answer 1

Id MUST be unique. You cannot have multiple "right" div. If the same style should be applied to multiple elements, it should be a class. It is also true for id img1
<div class="font_links"> is useless since the <link> tags are not displayed.
You used margin-bottom: 5em instead (?) of margin-bottom: 5px
http://jsfiddle.net/29tz5efb/

Answer 2

Your .main_content has margin-bottom: 5em; which causes it to move down

Answer 3

IDs should only be used with a single element; if you intend to apply a particular style to multiple elements, then a class should be used.
The spacing issue is caused by .main_content - the margin-bottom: 5em; produces a 5em (five times the size of a 'M' in whatever font size you were using) gap between your pink- and plum-coloured paragraph.

Answer 4

Remove margin-bottom: 5em; on .main_content