我有点问题。出于某种原因，我的代码中不断出现水平滚动条。我已经尝试了所有方法，但似乎无法删除它。以下链接是代码的实时预览。
HTML
<body>
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo"><a href="#">Magna Contra</a></li>
<li class="active"><a href="#">Blog With Us</a></li>
<li><a href="#">Compxta</a></li>
<li><a href="#">Laurie</a></li>
<li><a href="#">SUBTITLESOFLIFE</a></li>
</ul>
</div>
</div>
</section>
<div class="bg">
<h1>SUBTITLESOFLIFE</h1>
</div>
<ul class="check">
<li class="bold"><a href="#">Hot Trends</a></li>
<li class="topic"><a href="#">Daft Punk</a></li>
<li class="topic"><a href="#">#bbcqt</a></li>
<li class="topic"><a href="#">Petite Noir - Major</a></li>
<li class="topic"><a href="#">Alt J Album Teaser</a></li>
<li class="topic"><a href="#">Materialistic Happine$$</a></li>
<li class="topic"><a href="#">WOLF</a></li>
</ul>
<div class="contar">
Lorem Dosi
</div>
</body>
</html>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;
}
::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}
li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
hr{
color:#dfe0db;
border: 0;
background-color: #dfe0db;
height: 1px;
}
.bold{
display: inline;
}
.bold a{
color:#e94378;
}
.topic{
display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;
}
.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.topic a:hover{
color:#e94378;text-decoration:none}
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}
.image span {position: absolute; line-height: 20px; display: block; top: 50%;
margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
text-transform: uppercase;
font-size: 1.5em; letter-spacing:;}
@media screen and (max-width:800px) {
.image span {
font-size:0.8em;
}
}
@media screen and (max-width:400px) {
.image span {
font-size:0.7em;
}
}
.bg{
background-color: #e94378;
}
img.ri
{
position: relative;
max-width: 100%;
width:100%;
display: inline-block;
vertical-align: middle;
}
@media screen and (orientation: portrait) {
img.ri { max-width: 100%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 100%; }
}
.text{
font-family: "proxima-nova";
font-size: 1em;
letter-spacing: .2em;
text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}
.tex{
font-family: "proxima-nova",sans-serif;
font-size: 2.5em;
letter-spacing: 3px;
text-transform: uppercase;
bottom:160px;
left: 320px;
color:white;
padding: 10px;
}
.image{
vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: center;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.contar {
margin: 0 auto;
text-align: center;
width:100%;
height:400px;
background-color: white;
}
img.ft{
float:left;
}
.featured{
background-color: white;
width:69%;
text-align: center;
margin: 0 auto;
display: inline-block;;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}
.txt{
font:800 proxima-nova;
}
h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}