1
ページの右上にナビゲーションを表示しようとしていますが、上から100pxのように表示されます。私はこれを引き起こしている何の手掛かりを持っていない、私はヘッダーの他のもののパディングと余白を変更しようとしたが、私はそれを解決することはできません。どんな助け？Navはページの上部にありませんか？
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CT Designs | Home</title>
<!-- Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> CT Designs </h1>
</div>
<div id="menu">
<svg height="40px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<script src="jquery-3.1.1.min" href="main.js"></script>
</body>
</html>
CSS：
body {
margin: 0;
padding: 0;
}
.container {
min-width: 80%;
float: center;
}
ul {
padding: 0;
margin: 0;
}
header {
position: fixed;
width: 100%;
height: 100%;
background-image: url("../resources/img/header.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
header .container #branding h1 {
display: block;
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%);
font-size: 70px;
text-transform: uppercase;
font-weight: 400;
margin: 0;
padding: 0;
font-family: Roboto;
color: #fff;
margin-top: -0.5em;
padding: 30px;
border: solid 3px #fff;
}
header .container #menu {
margin: 10px;
padding: 0;
width: 100px;
}
header .container #menu svg {
cursor: pointer;
margin: 0;
padding: 0;
}
header .container #menu svg path.fill {
fill: white;
}
header .container nav ul {
float: right;
margin-bottom: 40px;
}
header .container ul li {
display: inline-block;
text-decoration: none;
color: white;
font-size: 20px;
font-family: Roboto;
padding-right: 20px;
}
あなたは、あなたのブラウザの開発者向けツールであなたのウェブサイトを検査することができます
は、ここに1つのソリューションです。ほとんどのブラウザで、 'Ctrl + Shift + i 'を使って開くことができます。次に、インスペクタを使用して、何が望ましくない配置を引き起こしているかを確認できます。 – Schwesi
@Schwesi私はそれを行っており、それはnavの上に大きなオレンジ色のスペースがあり、どのようにロゴ（ソースと思われる）を変更しようとも、私はそれを修正できません –
ブロックレベルの要素です。インラインまたはインラインブロックに変更するプロパティ。 – pol