Help with CSS for Course assingment : Nav section background color not showing up


I am a student at a local Technical College taking an intro course on HTML & CSS.
Our book is the 3rd edition of Terry Felke Morris’s " Basics of Web Design: HTML5 & CSS3 ".

**Chaper 7 homework. Page 243 . **

  • Problem: Can’t get the Navigation column background color the same as shown in the book. It is a dark beige color.


Here is my CSS , in notepad++

body     {  background-color: #F5F5DC;
               color: #2E0000;
	       font-family: Verdana, Arial, sans-serif; 
              background-image: url(javabackground.gif);                }
#wrapper {  width: 80%;
                margin-left: auto;
		margin-right: auto;
		background-color: #E2D2BO;
		min-width: 960px;
		max-width: 2048px;
               box-shadow: 5px 5px 5px #2E0000;                          }
header   { background-color: #D2B48C;                                }

h1        {  font-family: Georgia, "Times New Roman", serif;
              height: 100px;
              background-image: url(javalogo.gif);
	      background-position: center;
	      background-repeat: no-repeat;
	      text-indent: -9999px;
	      margin: 0;                                                 }
nav      { float: left;
             width: 160px;
	     font-weight: bold; 
             text-align: center;
	     padding: 10px;
             padding-left: 0;
             font-size: 1.2em;	                                      }
nav a    { text-decoration: none;                                     }

nav a:link     { color: #795240;                                     }
nav a:visited  { color: #A58366;                                     } 
nav a:hover    { color: #F5F5DC;                                     }

main     { background-color: #F5F5DC;
              margin-left: 175px;
	      padding: 20px; 
              display: block;                                            }
main ul   {  list-style-image: url(marker.gif);
                list-style-position: inside;                              }

main div   {  overflow: auto;
                  font-size: 90%;
		 padding-left: 5%;
                 padding-right: 5%;                                       }
h2       { font-family: Georgia, "Times New Roman", serif;            }

h3       { background-color: #E6D6A9;
           text-transform: uppercase;                                 }

dt       { font-weight: bold;                                         }

#hero    { background-image: url(heroroad.jpg);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   color: #F5F5DC;                                            }

.news    { margin-left: 20%;
           margin-right: 20%;                                         }
footer   { background-color: #D2B48C;
           color: #000000;
	       font-size: .60em;
	       font-style: italic;
	       text-align: center;
	       padding: 10px;      

footer a:link     { color: #2E0000;                                   }
footer a:visited  { color: #000000;                                   } 
footer a:hover    { color: #F5F5DC; 	                              }

Here is my HTML for the Index/Home page.

<!DOCTYPE html>
<html lang="en">

<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link href="javajam.css" rel="stylesheet">


<div id="wrapper">

<h1>JavaJam Coffee House</h1>

<a href="index.html">Home</a> &nbsp; 
<a href="menu.html">Menu</a>  &nbsp; 
<a href="music.html">Music</a>  &nbsp; 
<a href="jobs.html">Jobs</a> &nbsp; 

<main id="hero">

<h2>Follow the Winding Road to JavaJam</h2>

<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday</li>

54321 Route 42<br>
Ellison Bay, WI 54210<br>


Copyright &copy; 2016 JavaJam Coffeee House<br>
<a href=""></a>




Hey, I suggest you take a look at this link:
to help you format your code. It will benefit both parties.

Ok, I think the color is #e7debf since that’s the colour I picked up from the picture. To get your nav to look like that, I suggest adding background-color and set height to 320px to your nav selector:

nav {
    background-color: #e7debf;
    height: 320px;

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.