I've looked up other people who have had similar problems but I can't seem to find an answer that works for me. I'm trying to center my nav bar but it keeps getting pushed off to the left. Any help would be appreciated! Thanks.
body {
background-color: rgb(222, 243, 246);
/* background-image: url("Capitola.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: contain;
margin: 0;
padding: 0;
border: 0;
*/
}
div.image {
background-image: url("Capitola.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
margin: 0;
padding: 0;
border: 10 solid #021a40;
position: absolute;
height: 100%;
width: 100%;
}
div#wrapper {
position: fixed;
text-align: center;
z-index: 1000;
margin: 0 auto;
}
.navbar ul {
list-style-type: none;
display: inline-block;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 500px;
border: 1px solid black;
}
.navbar li {
float: left;
display: inline;
text-align: center;
}
.navbar a {
display: inline-block;
font-weight: bold;
width: 120px;
color: black;
background-color: rgb(254, 255, 241)
/*rgb(219,243,245)*/
;
text-align: center;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
background-color: rgb(239, 162, 180);
}
h1 {
font-family: Florence, cursive;
margin-top: 8%;
margin-left: 60%;
color: white;
font-size: 3.5em;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Michael Leath</title>
</head>
<body>
<div class="image">
<h1>Michael Leath</h1>
</div>
<div id="wrapper">
<div class="navbar">
<ul>
<li><a href="#aboutme">About Me</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#education">Eduation</a>
</li>
<li><a href="#background">Background</a>
</li>
</ul>
</div>
</div>
</body>
</html>
You need to set a width for the #wrapper
margin: 0 autoto work :)