不正确的并排div对齐

我想创建一个简单的左侧菜单布局。不正确的并排div对齐

但是，包含主要内容的div完全与侧边菜单并排排列。

侧面菜单直接位于导航菜单下方，没有间隙。

导航菜单和大约1厘米的主要内容之间有一个小差距。我已经拿出了所有没有任何区别的填充和边距。

请有人看看它，因为我不明白我做错了什么。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Left Menu Layout</title> 
     <link rel="stylesheet" type="text/css" href="style2.css" /> 
     <meta charset ="UTF-8"> 
    </head> 

<body class="body"> 

    <header class="main-header"> 
     <img src="Images/logo.png" alt="Logo" /> 
     <nav> 
      <ul> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav> 
    </header> 

    <div class="main-content"> 

     <aside class="side-menu"> 
      <p>ABC</p> 
     </aside> 

     <div class="content"> 
       <article class="top-content"> 
        <header> 
         <h2><a href="#" title="First Post">First Post</a></h2> 
        </header>     
        <footer> 
         <p class="post-info">This post if written by </p> 
        </footer> 
         <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p> 
       </article> 

       <article class="bottom-content">  
        <header> 
         <h2><a href="#" title="Second Post">First Post</a></h2> 
        </header> 
        <footer> 
         <p class="post-info">This post if written by </p> 
        </footer>      
         <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
       </article> 
     </div> 

    </div> 

    <footer class="main-footer"> 
     <p>Copyright &copy; 2013</p> 
    </footer> 

</body> 

</html>

CSS

/* =========================== 
    ======= Body style ======== 
    =========================== */ 

body { 
    background-image: url('Images/bg.png'); 
    color: #000305; 
    font-family: Arial; 
    text-align: left; 
    margin: 0; 
    padding: 0; 
    } 

.body { 
    clear: both; 
    margin: 0 auto; 
    width: 960px; 
} 

/* =========================== 
    ======= Anchor style ====== 
    =========================== */ 
a { 
    outline: 0; 
    } 

a img { 
    border: 0px; 
    text-decoration: none; 
} 

a:link, a:visited { 
    color: #CF5C3F; 
    text-decoration: none; 
} 

a:hover, a:active { 
    background-color: #CF5C3F; 
    color: #fff; 
    text-decoration: none; 
} 

/* =========================== 
    ===== Main Navigation ===== 
    =========================== */ 

.main-header nav { 
    background: #666; 
    height: 40px; 
} 

.main-header nav ul li { 
    float: left; 
    display: inline; 
} 

.main-header nav a:link, .main-header nav a:visited { 
    color: #fff; 
    display: inline-block; 
    height: 30px; 
    text-decoration: none; 
} 

/* =========================== 
    ======= Content Area ====== 
    =========================== */ 

.main-content { 
    overflow: hidden; 

} 

.top-content { 
    background-color: #FFF; 

} 

.bottom-content { 
    background-color: #FFF; 

} 

.content { 
    width: 682px; 
    float: left; 

} 

.post-info { 
    font-style: italic; 
    color: #999; 
    font-size: 85%; 
} 

/* =========================== 
    ======== Sidebar ========== 
    =========================== */ 

.side-menu { 
    width: 268px; 
    float: left; 
    background-color: #FFF; 
}

来源

2013-12-19 user3043645

主要是因为你的h2 http://jsfiddle.net/LUp5f/1/ – Huangism

一个<p>总是有自己的利润率。减少您的中的<p>左右的余量，它应该可以解决问题。

如果您需要更接近顶部导航，您可以在<header>中对<h2>执行此操作。

来源

2013-12-19 21:57:44

谢谢。这解决了这个问题。我一直在寻找CSS重置来删除所有预设的格式。 – user3043645

我个人避免重置css文件，因为这样你就可以更好地了解你的HTML元素，并且你可以理解他们的怪癖，并使用默认设置让你的CSS更容易阅读。但这完全是个人偏好。 –

不正确的并排div对齐

回答

相关问题