Nav Bar not showing correct font color

HTML-CSS
1

I’m new to web design and am creating a web page but am having problems… The nav bar wont show all my text in white, just the page links. Dreamweaver says there is an error at line 22 in the CSS code.

header h1 { 
font-size: 40px; 
color: #ffffff 
position: absolute; 
width: 425px;

Full code:

@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: 0; 
left: 50px; 
} 

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; 
} 

section{ 
position: absolute; 
top:190px; 
left: 154px; 
width: 1634px; 
}

/* 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;
}
2

Here is also the HTML code for the index page in full if needed.

<!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>
3

Hi @AJ20211,
it is kind of hard to discern where the problem is. I would suggest you use Chrome Dev Tools to inspect the element in question and see what style is applied to it.

Do notice that the following rule:

header nav ul li a { 
text-decoration: none; 
color: #ffffff;  <------ Colors only the links in white
font-size: 18px; 
}

If you want other nav elements to be white add a color rule to the nav bar.

4

Not sure I understand??? Would it go under header section? I thought under the header h1 section is where it would go and so I put it there.

header h1 { 
font-size: 40px; 
color: #ffffff 
position: absolute; 
width: 425px; 
}
5

I see why, you’re missing a semi-colon after the color. Add ; and betting the text will show up in white. :slight_smile:

6

Oh one of those stupid mistakes… Well I should have figured that out on my own. Any chance we could get the title: Jackson Lawton and Family on one line instead of 2. I also need to space the links equally apart. I know you’d probably have to use some sort of position tag but I’m not sure how that would be done and I was wondering, is the font size for them good enough?