Alignment Issue Concerning DIV - html

Question

I recently came back to HTML after a very long hiatus. At the moment, I'm wrapping my mind around since when I was designing, those weren't as popular as they are now. I'm currently stuck on an easy regarding width.
This is what's in my page:
<div class="parent">
<div id="logo">
<img src="images/logo-01.jpg" alt=""/>
</div>
<div id="social">
<img src="images/blogger-01.png" alt=""/> <img src="images/email-01.png" alt=""/>
<img src="images/facebook-01.png" alt=""/> <img src="images/foursquare-01.png" alt=""/><br>
<img src="images/google+-01.png" alt=""/> <img src="images/instagram-01.png" alt=""/>
<img src="images/linkedin-01.png" alt=""/> <img src="images/yelp-01.png" alt=""/><br>
</div>
</div>
<div class="parent">
<div id="content1">
<p>Poem-A-Day. Poem-a-Day is the original and only daily digital poetry series featuring over 200 new, previously unpublished poems by today's talented poets each year. On weekdays, poems are accompanied by exclusive commentary by the poets. Don't pay attention to me.</p>
</div>
<div id="content2">
<p>Testimony</p>
<p>Request Proposal</p>
</div>
</div>
And this is my style sheet (note: width on parent is purposely left blank:
*
{
font-family: "Century Gothic";
margin: 0em;
}
.parent
{
width: ;
}
#logo
{
clear: both;
float: left;
font-size: 100%;
left: 15em;
padding: 1em 0em;
position: relative;
}
#social
{
float: right;
font-size: 90%;
padding: 1em 0em;
position: relative;
right: 15em;
}
#banner
{
background: url(../../images/banner-01.jpg);
background-size: cover;
clear: both;
padding: 10em 0em;
position: relative;
}
#content1
{
border-right: medium solid #7e8082;
clear: both;
float: left;
font-size: 100%;
left: 15em;
position: relative;
}
#content2
{
font-size: 90%;
float: right;
position: relative;
right: 15em;
}
Here's a sample of the page I'm working on: http://www.ragnarok.ws
The idea is to have the margins on the logo & content1 and social & content2 align, which it does here. Unfortunately, content1 gibberish is running wild. If I put in, something like "width=500px", it falls back in line, but the alignment I'm looking for is screwed up. I suspect that I'm misusing the parent class, but I'm stone walled at the moment.
Any help is greatly appreciated.

Answer 1

Remove this style (left:15em;) from your main.css at line number 64.
#content1 {
/* left: 15em; */
}
and add this style
#content1 {
border-right: medium solid #7e8082;
font-size: 100%;
margin: auto;
position: relative;
width: 55%;
}