CSS background color not working

1

This is my Index.html code:

<body>
	<nav>
		<ul>
			<li><a class="active" href="#">Lab 1</a></li>
			<li><a href="lab5.html">Lab 5</a></li>
			<li><a href="lab7.html">Lab 7</a></li>
			<li><a href="lab8.html">Lab 8</a></li>
			<li><a href="home.html">Project</a> </li>
		</ul>
	</nav>
	<main>
		<br />
		<h1> CNET204 Page</h1>
		<p>I wish to learn how to create a full webpage with a functional navigation bar </p>
		<p>"Heroes are people who face down their fears. It is that simple. A child afraid of the dark who one day blows out the candle; a woman terrified of the pain of childbirth who says, 'It is time to become a mother'. Heroism does not always live on the battlefield." - David Gemmell</p>
		<blockquote>"Heroes are people who face down their fears. It is that simple. A child afraid of the dark who one day blows out the candle; a woman terrified of the pain of childbirth who says, 'It is time to become a mother'. Heroism does not always live on the battlefield." - David Gemmell</blockquote>
		<pre>"Heroes are people who face down their fears. It is that simple. A child afraid of the dark who one day blows out the candle; a woman terrified of the pain of childbirth who says, 'It is time to become a mother'. Heroism does not always live on the battlefield." - David Gemmell</pre>
	</main>
</body>
</html>

This is the CSS:

body {
	background-color: #FFEFD5;
	color: #425df5; 
	font-family: verdana;
}

h1 {
	text-align: center;
	text-transform: uppercase;
	color: #0390fc;
}

pre, blockquote, p {
	background-color: #ffffe7;
}

pre {
	white-space: pre-wrap;	
}

/* start nav */
nav ul {
	background-color: #ffffe8!important;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-radius: 25px;
}

nav ul li {
	float: left;
}

nav ul li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

nav ul li a:hover:not(.active) {
	background-color:#111111;
}

nav ul li.active {
	background-color: #bcce1e;
	color: #807D7C;
}

nav ul li.right {
	float: right;
}

@media screen and (max-width: 600px) {
	nav ul li.right,
	nav ul li {float: none;}
}	

/* end nav */
2

The container elements are collapsed (0 height) because of the float on the li.

You can set overflow: auto; on the ul, or use the new-ish display: flow-root; (check support caniuse: flow-root). If you need to clear often, making a dedicated clearfix class would make sense.