How this space generate in this flex layout

Question

I want to use flex layout to do a navigation.I have 4 li in a ul tag. I want them side by side.But when I use flex layout.There are some place not use. How can I delete the green part.

this is my html code.

   <nav class="nav active" id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Works</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <button>
            <div class="line line1"></div>
            <div class="line line2"></div>
        </button>
    </nav>

this is my css code

nav {
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 0;
    opacity: 0;
    font-size: 1.2rem;
    margin: 10px;
}

nav.active ul {
    opacity: 1;
    width: 100%;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    margin: 0px 10px;
}

Its browsers default padding for ul. Check box model of element in your dev tools. — Code Spirit, Sep 24 '22 at 12:54

score 2 · Answer 1 · answered Sep 24 '22 at 13:09

2

This happens because the ul has a default padding-inline-start of 40px.

Adding a padding: 0px to the nav ul selector would fix the issue.

You can see that default value in Chrome Dev Tools, as you can see in the bottom right of this screenshoot

answered Sep 24 '22 at 13:09

Othecos

112
4

How this space generate in this flex layout

1 Answers1