Confusion in the use of class selector in CSS

Question

I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.

To do the same I changed the code to the following:

 body {
          font-family: "Avenir Next";
        }

        .header-list li {
          list-style: none;
           float: left;
          padding: 33px 20px;
        }

        .header {
          background-color: #26d0c9;
          color: #fff;
          height: 90px;
        }

        .header-logo {
          float: left;
          font-size: 36px;
          padding: 20px 40px;
        }

        .header-list {
          float: left;
        }

        .main {
          background-color: #bdf7f1;
          height: 600px;
        }

        .footer {
          background-color: #ceccf3;
          height: 270px;
        }

This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that

The CSS for the float property of <li> elements should be deleted.

So, to understand why this was needed, I re-read their instructions once again and it stated that:

Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:

float: left;


padding: 33px 20px;

Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:

          body {
          font-family: "Avenir Next";
        }

        .header-list li {
          list-style: none;
        /* CSS properties from here are moved to line 32. But why? 
      We still get the required result without doing so.             
      */
        }

        .header {
          background-color: #26d0c9;
          color: #fff;
          height: 90px;
        }

        .header-logo {
          float: left;
          font-size: 36px;
          padding: 20px 40px;
        }

        .header-list {
          float: left;
        }

        /* Added -> CSS for <li> tags within header-list
        (CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
        But I didn't understand why the same has been told to do again below)


        */
        .header-list li {
          float: left;
          padding: 33px 20px;
        }

        .main {
          background-color: #bdf7f1;
          height: 600px;
        }

        .footer {
          background-color: #ceccf3;
          height: 270px;
        }

I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.

Answer 1

You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned

The CSS for the float property of <li> elements should be deleted.

This is another way of of displaying your list horizontally without using floats. Hope this helps!

I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more! https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT