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 {}' –