Nav bar background color not changing-CodePudding

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 >
        <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 >
        <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:[email protected]"> [email protected]</a>
        </small>


    </footer>

 


</body>






</html>
""

CodePudding user response：

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

CodePudding user response：

maybe you can try backround instead of background color

 nav {
    background: #ff0000; 
}

CodePudding user response：

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

You should also remove the float function.

CodePudding user response：

Use this CSS

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