正如我的标题所暗示的，我的内容离开了屏幕。
我查看了我的 css 文件，没有任何边距减号。那么，为什么两侧的内容都在屏幕外？
感谢任何关于为什么会这样的建议。
谢谢。
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li><a href="#">ABOUT NBV</a></li>
<li><a href="#">2011 EVENT</a></li>
<li><a href="#">NORDIC ROASTER</a></li>
<li><a href="#">RESULTS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=&t=a" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></a></li>
<li><a href="https://twitter.com/intent/tweet?source=&text=a:%20" target="_blank" title="Tweet"><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></a></li>
<li><a href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+"><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></a></li>
<li><a href="http://pinterest.com/pin/create/button/?url=&description=a" target="_blank" title="Pin it"><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></a></li>
<li><a href="mailto:?subject=a&body=a:%20" target="_blank" title="Send email"><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></a></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>最佳答案
您的 topBar 中有两个 div 类 row 但它们不在类 container 的元素内>。这不是 Bootstrap 的意图，因此会导致意外行为。您必须将这两个 div 包装在另一个具有类 container 的 div 中。
另外，正如@nik_m 提到的:为什么要将整个页面包装在 header 中？这不是 headers 应该做什么。
关于html - 为什么内容会离开屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42630172/