Remove border from pages
I'm trying to create a navigation bar, but I'm having trouble implementing a solution that removes the margin, but it only removes it from my home page. I've tried suggestions, including rating 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 JSFiddle
I'm kind of new to web development, so any help is greatly appreciated! ^^
+3
source to share