Css margin-left auto makes a div leave its container-CodePudding

I'm learning how to make a navbar and I can't align an item properly to the left. here's my html code

.navul {
  display: flex;
  height: 50px;
  background-color: rgb(71, 71, 71);
}

.navli1 {
  margin: auto;
}

.navli2 {
  margin-left: auto;
}

.navlink {
  text-decoration: none;
  color: white;
  background-color: rgb(0, 0, 0);
  padding: 16px 25px;
}

.navlink:hover {
  color: rgb(175, 175, 175);
}

ul {
  list-style: none;
}

<header>
  <ul class="navul">
    <li class="navli1">
      <a class="navlink" href="#">Home</a>
    </li>
    <li class="navli2">
      <a class="navlink" href="#">Logout</a>
    </li>
  </ul>
</header>

here's the result, notice logout item is outside the ul container.

CodePudding user response：

.navul {
        display: flex;
        height: 50px;
        background-color: rgb(71, 71, 71);
    }

    .navli1 {
        margin: auto;
    }

    .navli2 {
        margin: auto 0px auto auto;
    }

    .navlink {
        text-decoration: none;
        color: white;
        background-color: rgb(0, 0, 0);
        padding: 16px 25px;
    }

    .navlink:hover {
        color: rgb(175, 175, 175);
    }

    ul {
        list-style: none;
    }

<body>
    <header>
        <ul class="navul">
            <li class="navli1">
                <a class="navlink" href="#">Home</a>
            </li>
            <li class="navli2">
                <a class="navlink" href="#">Logout</a>
            </li>
        </ul>
    </header>
</body>

In the navli1 you are telling CSS to have margin auto on top, right, bottom and left, whereas in navli2 you were only telling the margin left. This caused the problem

CodePudding user response：

Remove height of ".navul" and add "display: block" to ".navlink"

.navul {
    display: flex;
    background-color: rgb(71, 71, 71);
}
.navli1 {
    margin: auto;
}
.navli2 {
    margin-left: auto;
}

.navlink{
    text-decoration: none;
    color: white;
    background-color: rgb(0, 0, 0);
    padding: 16px 25px;
    display: block;
}
.navlink:hover {
    color: rgb(175, 175, 175);
}
ul {
    list-style: none;
}

<body>
    <header>
        <ul class="navul">
            <li class="navli1">
                <a class="navlink" href="#">Home</a>
            </li>
            <li class="navli2">
                <a class="navlink" href="#">Logout</a>
            </li>
        </ul>
    </header>
</body>

CodePudding user response：

You are not using flex completely. Use styles such as justify-content and flex-direction to complete the design.

.navul {
    display: flex;
    height: 50px;
    background-color: rgb(71, 71, 71);
    flex-direction: row;
    justify-content: spacearound;
}
.navli1 {
    margin: auto;
}
.navli2 {
    margin: auto;
}

.navlink{
    text-decoration: none;
    color: white;
    background-color: rgb(0, 0, 0);
    padding: 16px 25px;
}
.navlink:hover {
    color: rgb(175, 175, 175);
}
ul {
    list-style: none;
}

<header>
        <ul class="navul">
            <li class="navli1">
                <a class="navlink" href="#">Home</a>
            </li>
            <li class="navli2">
                <a class="navlink" href="#">Logout</a>
            </li>
        </ul>
    </header>