Nav bar background color not changing

Daniel Avila 0
Viewed 20

Learning HTML/CSS and Having trouble with getting NAV bar to show the given background color. Tried putting nav in class and still could not get it to work. Even commented part of the code out to see if it changes the background color of nav and still could not get anything to work. Looked around and could not find out why its not showing the color. Please describe explain in detail as I want to learn from the mistake. Thanks in advance for the help

""

    header{
        background-color: #002171;
        color: white;
    }
       
    
    header ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
    }
       
    
    nav {
        background-color: red;
    }
    
    nav li {
        float: left;
    }
    
    nav a{
        padding:8px;
        
    }
    
    
    .content{
        margin-top: 70px;
        s
    }
    
    .content {
        list-style-type: disc;
        
        
      
    }


"" <!DOCTYPE HTML>
<html lang="en-us">


<head>

  <meta charset="utf-8" />
  <title>Pacific Trails Resort </title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Pacific Trails Resort</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="yurts.html">Yurts</a></li>
                <li><a href="index.html">Activities</a></li>
                <li><a href="index.html">Reservtions</a></li>
            </ul>
        </nav>
    </header>

    <div class="content">
        <h2>Enjoy Nature in luxury</h2> 
        <p>Pacific Trails Resort offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>

        <ul>
            <li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
            <li>Savor nightly fine dining with an ocean view</li>
            <li>Unwind in the heated outdoor pool and whirlpool</li>
            <li>Explore the coast on your own or join our guided tours</li>
        </ul>

    </div>

    <div class="contact">
        <p>Pacific Trails Resort<br />
        12010 Pacific Trails Road <br />
        Zephyr, CA 95555 <br />
        </p>

        <p>855-555-5555</p>

   



    </div>


    <footer>
        <small>
            <i>Copy right &copy; 2022 Pacific Trails Resort</i><br />

            <a href="mailto:davilaco@asu.edu"> davilaco@asu.edu</a>
        </small>


    </footer>

 


</body>






</html>
""
css html
4 Answers

The problem isn't that you couldn't add a background-color to your nav tag, the problem is that you added float: left; to your list items in your nav. Because of that, your nav tag has no height. Read here more about float.

Simply remove float: left from your list items, and you will see the background color. If you want to keep the items horizontally aligned, you could use flexbox for this. Just create a styling selector for your ul which contains the nav items and add display: flex;

nav ul {
    display: flex;
}
userHTBl10

I don't know if this will work, but in your HTML code, instead of <nav> use <div class="nav"> and change the nav css into .nav

You should also remove the float function.

Wh1sper Develops0

maybe you can try backround instead of background color

 nav {
    background: #ff0000; 
}
rizaldodo0

Use this CSS

nav {
    background-color: red;
    display: block;
    width: 100%;
    clear: both;
    float: left;
    padding: 10px;
}
userIISl10
Related