Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jackson Lawton_homePage</title>
<link href="_CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Jackson Lawton and Family</h1>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
<li><a href="media.html">Media</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="resume.html">Resume</a>
</li>
</ul>
</nav>
</header>
<section>
<h1 id="pagename">Home</h1>
<h2>Welcome to the Lawtons</h2>
</section>
</div><!-- end of wrapper -->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#wrapper {
width: 1920px;
min-height: 1080px;
position: relative;
margin: 0 auto;
background-color: #5DD7FE
}
header {
width: 1778px;
min-height: 62px;
background-color: #808080;
position: absolute;
top: 48px;
left: 142px;
}
header h1 {
font-size: 40px;
color: #ffffff
position: absolute;
width: 425px;
}
header nav ul li {
list-style-type: none;
display: inline-block;
}
header nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 18px;
}
header nav ul li a:hover {
color: red;
}
header nav {
position: absolute;
top: 6px;
left: 500px;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why.
header h1 {
font-size: 40px;
color: #ffffff
position: absolute;
width: 425px;
