CODEWITHSUNDEEP
htmlcss
Vbnoob
Vbnoob

Reputation: 41

Css margin-left auto makes a div leave its container

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. header

Upvotes: 0

Views: 544

Answers (3)

Aman Sharma
Aman Sharma

Reputation: 964

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>

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20626

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>

Upvotes: 0

Muhammad Mutti Ur Rehman
Muhammad Mutti Ur Rehman

Reputation: 74

.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

Upvotes: 1

Related Questions