0
尽管我已经删除了padding和lower_content div的边距，但我仍然在屏幕左侧获得了这个薄的空白区域......就像有一个我无法在任何地方找到隐形边缘。我的内容很好地到达屏幕右侧，但不是左侧。屏幕左侧的额外空白区
请帮我看看这个问题...
HTML：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>My name here</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styleForFullPage.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="side_banner">
<nav>
<ul>
<li><a href="#" >HOME</a></li>
<li><a href="about_me_FP.html" >ABOUT ME</a></li>
<li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
<li><a href="contact_me_FP.html" >CONTACT</a></li>
</ul>
<hr/>
</nav>
</div>
<div class="name_div">
<h1>My name here</h1>
</div>
<div class="lower_content">
<p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
<br/>
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
<br/>
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
</p>
</div>
</html>
CSS：
@font-face {
font-family: comfortaa;
src: url(Comfortaa-Regular.ttf);
}
html {
background: url(meAndTheOcean.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.side_banner{
/*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
font-family: comfortaa;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
background-color:transparent;
float:left;
height:100%;
width: 150px;
margin: 0% 2% 2% 0%;
}
.side_banner nav ul{
width: 100%;
list-style: none;
list-style-type:none;
padding: 0;
}
.side_banner nav ul li{
}
.side_banner nav a:link, .side_banner nav a:visited{
color: white;
display:block;
text-decoration: none;
/*padding: 10px 25px;*/
padding: 10px;
}
.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
text-decoration: none;
background-color: orange;
/*background-color: 1C6BA0;*/
text-shadow: none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.main_content{
float: left;
margin: 1% 2% 2% 2% ;
width: 70%;
font-family: Tahoma, Verdana, Segoe, sans-serif;
color:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.name_div{
font-family:comfortaa;
color: white;
text-align: center;
width: 300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-110px 0 0 -150px;
}
.lower_content{
overflow: auto;
position: absolute;
top: 650px;
width:100%;
background-color:white;
overflow-x:hidden;
color:black;
font-size:20;
margin: 0% 0% 0% 0% ;
padding: 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
应用'html'元素样式'body'元素为好。像'html，body {}' –