Html 与DIV有关的对齐问题

经过很长一段时间的休息后，我最近又回到了HTML。目前，我正在绞尽脑汁，因为在我设计的时候，这些东西并不像现在那么流行。我目前被困在一个简单的关于宽度的问题上

这是我的页面中的内容：

<div class="parent">
    <div id="logo">
        <img src="images/logo-01.jpg" alt=""/>
    </div>
    <div id="social">
        <img src="images/blogger-01.png" alt=""/>&nbsp;<img src="images/email-01.png" alt=""/>
        <img src="images/facebook-01.png" alt=""/>&nbsp;<img src="images/foursquare-01.png" alt=""/><br>
        <img src="images/google+-01.png" alt=""/>&nbsp;<img src="images/instagram-01.png" alt=""/>
        <img src="images/linkedin-01.png" alt=""/>&nbsp;<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>

以下是我正在处理的页面示例：

我们的想法是让logo&content1和social&content2上的边距对齐，在这里就是这样。不幸的是，content1的胡言乱语正在泛滥。如果我输入“width=500px”之类的内容，它会向后倾斜，但我要寻找的对齐方式是错误的。我怀疑我误用了父类，但我目前处境艰难

非常感谢您的帮助

从main.css的第64行删除此样式（左：15em；）

#content1 {
/* left: 15em; */
}

并添加此样式

#content1 {
   border-right: medium solid #7e8082;
   font-size: 100%;
   margin: auto;
   position: relative;
   width: 55%;
 }

---

谢谢你回复我，威尔。删除content1的15em会向左刷新内容。我希望我的内容1与徽标对齐。也许我不应该使用em进行测量？在#content1{width:80%；margin:auto；}中添加此代码，减少所需的宽度删除float；离开，再试一次@RalphThank。如果没有左：15em并在content1中输入宽度和边距，我仍然无法实现我想要的位置。在移动设备上查看站点时，我还注意到任何宽度超过70%的内容都与下一个div（content2）重叠。我开始觉得我需要把这段代码拆掉，从头开始。

#content1 {
   border-right: medium solid #7e8082;
   font-size: 100%;
   margin: auto;
   position: relative;
   width: 55%;
 }