我正在制作bootstrap RWD页面，每当我遇到问题时，无论何时我添加新内容，它都会与最后一个内容重叠，例如在我添加<hr>标签时的plunker链接中，它会重叠对于上一个/上面的内容，整个页面样式或特定元素样式缺少什么？感谢。
https://plnkr.co/edit/0QaOzR3fZM147g2jCbW1
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Investcube</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div id="page">
<header>
<nav class="main-menu" id="main-menu-section">
<div class="hero">
<h1>investcube</h1>
<a class="logo" href="#" title="investcube"><span>investcube</span> </a>
</div>
<div class="menu-item-list">
<ul>
<li ><a href="#">Home</a></li>
<li ><a href="#">Team</a></li>
<li ><a href="#">About</a></li>
<li ><a href="#">Portfolio</a></li>
<li ><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section >
<div class="container">
<div class="row " style="margin-bottom: 100px" id="meet-the-team ">
<h1 >Meet the team</h1>
<!-- <div class="col-sm-6" style="border-style: solid;width: 300px;height: 450px;margin:15px " > -->
<div class="col-sm-6" id="mask">
</div>
<div class="col-sm-6" style="margin:15px">
<h3>iain shovlin</h3>
<h4>chairman & founding partner</h4>
<div class="row">
<div class="col-sm-6 other">
<h4>Chicago, USA</h4>
</div>
<div class="col-sm-6 other2">
<a href="#" target="_blank" title=" LinkedIn">
</a>
</div>
</div>
<blockquote>
<p class="quote">Finance is critical. If sufficient investment is made in infrastructure and venture capital is made available, there will be a big improvement in the situation.</p>
</blockquote>
<p class="about">Before forming Guild Capital in 2009, Iain was a venture capitalist with Technology Crossover Ventures in Palo Alto, California for six years. At TCV he undertook investments spanning consumer internet,business process outsourcing, and software. Prior to venture capital, Iain was a management consultant with Bain & Company</p>
<p class="about">Iain was born in Glasgow, Scotland and has an M.A. in International Business from the University of Edinburgh, Scotland.</p>
</div>
</div>
</section>
<section class="list" style="width: 100%" >
<div class="container">
<div class="row ">
<div class="col-sm-6 " >
<ul class="Service"><h4>Prior Investments</h4>
<li>AdKnowledge</li>
<li>Claria</li>
<li>Dermstore</li>
<li>Dealon</li>
<li>EXL Service (NASDAQ: EXLS)</li>
<li>Hautelook (Acquired by Nordstrom)</li>
<li>Integres</li>
<li>Leadscon (Acquired by Access Intelligence)</li>
<li>NexTag</li>
<li>Security Source</li>
<li>Sensa</li>
<li>Total Attorneys </li>
</ul>
</div>
<div class="col-sm-6 " >
<ul class="Service"><h4>Active Investments </h4>
<li>Argyle Search Partners*</li>
<li>Candy Club</li>
<li>Club W</li>
<li>Fabletics</li>
<li>Gaming Insiders</li>
<li>Gohealth</li>
<li>Home Chef</li>
<li>JustFab</li>
<li>Atidiv</li>
<li>MailControl</li>
<li>Mystery Tackle Box</li>
<li>Techweek*</li>
</ul>
</div>
</div>
</div>
</section>
<section class="arrow">
<div class="arrows prev "></div>
<div class="smriti-Jayaraman-Vic">
<a href="#" class=""> Smriti Jayaraman </a>
<a href="#" class=""> Vice President </a>
</div>
<div class="arrows next "></div>
<div class="akshat-jain-Senior-A">
<a href="#" class=""> Akshat jain </a>
<a href="#" class=""> Senior Associate </a>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="col-md-12">
<hr class="col-xs-12">
</div>
</div>
</section>
<script type="text/javascript" src="./js/jquery-min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>
</html>
CSS
@font-face {
font-family: "PlayfairDisplay-Regular", serif;
src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');
}
@font-face {
font-family: "HelveticaNeue",Helvetica, Arial, sans-serif;
src: url('fonts/HelveticaNeue.ttf') format('truetype');
}
#page{ margin: 0 auto;
position: absolute;
left: 30%;
top: 20%;
max-width: 900px
}
header {
/* height: 430px;*/
position: relative;
}
header a.logo {
z-index: 1;
position: absolute;
display: block;
width: 160px;
height: 66px;
background-size: contain;
top: 15px;
left: 20px;
}
header a.logo span {
display: none;
}
header div.hero {
position: relative;
width: 100%;
top: 0;
left: 3px;
letter-spacing: 6px;
text-transform: uppercase;
/* margin-top: 30%;*/
padding: 50px 20px 20px 50px;
}
header div.hero h1 {
font-size: 2em;
line-height: 2em;
margin: 0;
color: #8A2BE2;
font-weight: 600;
}
body {
font-family: 'HelveticaNeue',Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: normal;
background-color: #fff;
overflow-x: hidden;
}
/* Navbar styles */
.main-menu {
width: 327px;
height: 2817px;
background: #f6f6f6;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1105;
overflow: hidden;
border: 1px solid #d7d7d7;
}
.menu-item-list {
display: block;
float: left;
width: 100%;
height: 100%;
position: relative;
}
.menu-item-list ul {
padding: 0 ;
margin: 0;
width: 100%;
position: relative;
}
.menu-item-list ul li {
list-style: none;
margin: 0 0;
padding: 0 0 0 10px;
border-top: 1px solid #262626;
border-bottom: 1px solid #262626;
}
.menu-item-list ul li a {
margin: 0;
padding: 8px 16px;
color: #373737;
font-weight: 300;
font-size: 19px;
display: block;
line-height: 60px;
text-align: right;
text-decoration: none;
}
.menu-item-list ul li a:hover,
.menu-item-list ul li.active a {
color: #8A2BE2;
border-right: 2px solid #8A2BE2;
}
#meet-the-team {
border-radius: 0px;
width: 681.95px;
height: 64px;
color: #402C59;
font-family: 'PlayfairDisplay-Regular', serif;
font-size: 48.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
}
#mask {
border-radius: 0px;
width: 299px;
height: 499px;
background-image: url(mask);
background: #d7d7d7;
box-shadow: 0px 2px 4px rgba:(0,0,0,0.5);
}
#finance-is-critical {
border-radius: 0px;
width: 393px;
height: 96px;
color: #402c59;
font-family: 'HelveticaNeue', sans-serif;
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
}
h3,h4{
text-transform: capitalize;
}
.Service { list-style: none;}
.Service :hover
{
color: #8A2BE2;
text-decoration: underline;
}
blockquote{margin: 0;color: #8A2BE2;background-color: #fff; border-left: none; }
blockquote p{margin: 30px 30px 20px 15px; }
blockquote p.quote{font-style: italic;font-size: 1.2em;}
blockquote::before{content: '\201c'; color: #8A2BE2;position: absolute;top: 120px;left:8px;font-size: 5em; font-family:serif; }
blockquote p.quote::after{content: '\201d';font-family: serif;}
section.arrow{
margin-top: 100px;
margin-bottom: 30px;
padding: 0;
}
.arrows{
/* width: 48px;
height: 48px;
border-color: #000;
position: relative;
bottom: 2%;
margin-top: -31px;*/
width: 48px;
height: 48px;
border-color: #000;
position: absolute;
bottom: 0px;
margin-top: 42px;
}
.prev{
border-bottom: 4px solid;
border-left: 4px solid;
transform: rotate(45deg);
left: 10px;
}
.next{
border-bottom: 4px solid;
border-left: 4px solid;
transform: rotate(-135deg);
right: 10px;
}
.smriti-Jayaraman-Vic {
width: 149.62px;
height: 56px;
color: #402c59;
font-family: "HelveticaNeue";
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: left;
position: absolute;
bottom: 0px;
left: 75px;
}
.smriti-Jayaraman-Vic ,.akshat-jain-Senior-A li{
list-style: none;
}
.lists{
width:200px;
}
.akshat-jain-Senior-A {
/* width: 149.62px;*/
width:133.62px;
height: 56px;
color: #939393;
font-family: "HelveticaNeue";
font-size: 18.0px;
font-style: normal;
font-stretch: normal;
font-weight: 400;
text-align: right;
margin-left: 50%;
position: absolute;
right: 75px;
bottom: 1px;
}
.akshat-jain-Senior-A a, .smriti-Jayaraman-Vic a{
color: #523e6c;
}
.akshat-jain-Senior-A a:hover,
.smriti-Jayaraman-Vic a:hover{
color: #8A2BE2;
}
.arrow :hover{color: #8A2BE2;}
section.gallery{
margin-top: 100px;
margin-bottom: 30px;
padding: 0;
}
答案 0 :(得分：0)
我能想到的是，在某些时候你使用浮动并且没有正确地清除后续元素。你检查过了吗？