すべてのコンテンツを保持し、幅が80％に設定されているdiv'container'があります。そのdivの中には、ロゴとナビゲーションバーが100％含まれているdiv'tophead'があります（ただし、親には80％しか到達しません）。次に、「container」div内にあり、イメージを持つ「maincont」があります。この画像を「コンテナ」divの側面に揃えて、20％のスペースが開いたままになるようにします。左にフロートするか左に揃えると、画面の左端の20％IDを超えて空白のように表示されます。これを修正する方法を教えていただければ幸いです。
画像が私のナビゲーションバーと重なっている理由を誰かが理解できれば、ボーナスに感謝します。
jsFiddle： http: //jsfiddle.net/4JKus/4/
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div align="center" id="tophead">
<img src="images/logo.png" alt="logo">
<ul>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
<div align="center" id="maincont">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS：
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
height: 68%;
width: 80%;
padding-top: 2%;
}
#maincont img{
height: 100%;
width: auto;
border-radius: 30px;
float: left;
}