Background color isnt showing

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>
  <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-size: cover;
      height: 500px;
      padding: 15px;
      margin: -15px;
/* here is the color i was trying to change */
    #menu {
    background-color: #303030;

    <div class="top-content">
    <div id="menu">
        Our trip

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

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

You might want to check out flexbox.

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

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