Menu
I am trying to build a navigation bar, but I'm having trouble implementing a solution that removes the margin, but it only removes it from my homepage. I have tried the suggestions, including the top rated one from this question, and still nothing.
CSS:
/**********************************
HEADING
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
background-color: #f00;
}
#logo {
text-align: center;
margin: 0;
}
/**************************
GENERAL
**************************/
body {
background-color: grey;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/**********************************
NAVIGATION
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
background-color: #fff;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AP World</title>
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://yourdomain.com/">
</head>
<body>
<header>
<a href="" id="logo">
<h1>AP World</h1>
</a>
<nav>
<ul>
<li><a href="/index.html">Home</a>
</li>
<li><a href="/songs">Songs</a>
</li>
<li><a href="/virgins">Virgins</a>
</li>
</ul>
</nav>
</header>
<div class="page-content">
<div class="wrapper">
Homepage
</div>
</div>
</body>
</html>
Here is a link to my site. and a link to a JSFiddle
I am kind of new to web development, so any help is much appreciated! ^^
207
asked May 02 '26 15:05
Remove float:left from your header CSS and it should resolve the problem. When you float an element, it takes it out of the DOM structure, so the margin from your H1 tag was being applied above the header even though the H1 is not part of the header.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
