How this space generate in this flex layout

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.I have add flex:1; in li.I also change the justify-content of the ul flex loyout. they all does not work.
How can I delete the green part. Please help me! Thanks a lot.

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;
}