Background color isnt showing

HTML-CSS
1

so I was trying to make a training page, then when I was trying to change the background color of the menu it didn’t show up, can anyone help? here’s my code

<!DOCTYPE html>
<html>       
<head>              
  <title>Savtrip | Save trip with us</title>              
  <style type="text/css">  
        body {
          background-color: white;
          font-family: sans-serif;
        }                          

        ul {
          text-align: center;
          list-style-type: none;
          text-decoration-color: white;
          color: white;
        }

        h1 {
          float: left;
        }

        li {
          float: right;
          padding: 10px;
          padding-top: 35px;
          text-align: center;
        }
    .top-content {
      background-image: url('beach.jpg');
      background-position:center;
      background-repeat:no-repeat;
      background-size: cover;
      height: 500px;
      width:100%;
      padding: 15px;
      margin: -15px;
    }
/* here is the color i was trying to change */
    #menu {
    background-color: #303030;
    }

  </style>       
  </head>       
  <body>
    <div class="top-content">
    <div id="menu">
    <ul>
    <h1>
      Savtrip
    </h1>
    <li>
        Our trip
    </li>
    <li>
        About
    </li>
    <li>
        Home
    </li>
    </ul>
  </div>
</div>
  </body>
</html>
2

If you use the browser devtools to inspect the elements, you’ll see that your menu div has no size. This is caused by using float: right

Here is your code with only that line removed:

1 Like
3

hmm, then what should i do to make the menu positioned on the right?

4

You might want to check out flexbox.

5

thanks bro, finally got it working, really appreciate your help :grinning:

6

Congratulations. I’m glad I could help. Happy coding!