0

I am trying to get the first li element to start at the same place as the ul element. I want this : desired result

It is working when put a margin-left:-3% in the first li element but this does not work when the screen is resized.

Without the margin, It looks like this : current result

And this is my code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }
      .nav {
        background-color: black;
        height: 10%;
        width: 100%;
      }
      body {
        height: 100%;
      }
      html {
        height: 100%;
      }
      li {
        list-style-type: none;
        padding: 1.25%;
        height: 100%;
      }
      li:hover {
        background-color: magenta;
      }
      li:first-child {
        background-color: green;
      }
      a {
        text-decoration: none;
        color: white;
      }
      li {
        float: left;
      }
      li:nth-child(3) {
        background-color: blueviolet;
      }
      li:last-child {
        float: right;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li><a href="www.google.ca">Home</a></li>
      <li><a href="www.google.ca">News</a></li>
      <li><a href="www.google.ca">Contact</a></li>
      <li><a href="www.google.ca">About</a></li>
    </ul>
  </body>
</html>
Parzival
  • 2,051
  • 4
  • 14
  • 32
sisca
  • 1
  • 1

1 Answers1

1

Add this to your style.

 ul {
     margin:0;
     padding:0;
    }
pullidea-dev
  • 1,768
  • 1
  • 7
  • 23
  • Thanks! It is working. I just need to set " padding:0;" because the margin is 0 by default. – sisca Jun 04 '21 at 02:27