Solution 1 :

Inside the #topnav .left selector you gave justify-content : left, actually left is not one among the possible values, change it to ‘flex-start’ (default). Anyways this did not trigger this gap issue. The gap is mainly due to the padding: 20px on all sides in #topnav a selector. If you want to get rid of the gap, make the padding only to top and bottom sides, make it as padding: 20px 0;

Problem :

There’s this annoying gap between each a element in .left, how do I remove it?

* {
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --darkest-blue: #03045eff;
    --dark-blue: #023e8aff;
    --blue: #0077b6ff;
    --lighter-blue: #0096c7ff;
    --sea-blue: #00b4d8ff;
    --light-blue: #48cae4ff;
    --lightest-blue: #90e0efff;
    --sky-blue: #ade8f4ff;
    --white-blue: #caf0f8ff;
}

#topnav {
    background-color: rgb(19, 19, 19);
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
}

#topnav .left {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%;
}

#topnav a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 20px;
    transition: all 0.2s ease-in-out;
}

#topnav a:hover {
    color: var(--sky-blue);
}

#topnav .section-seperator {
    width: 2px;
    height: 80%;
    background-color: white;
}

#topnav .right {
    display: flex;
    align-items: center;
    justify-content: right;
    flex: 1;
    height: 100%;
}
<div id="topnav">
    <div class="left">
        <div id="logo">
            <a href="index.html">
                <img src="images/logo.png" alt="logo">
            </a>
        </div>
        <div class="section-seperator"></div>
        <div class="links">
            <a href="index.html">Home</a>
            <a href="blog.html">Blog</a>
            <a href="boxes.html">Boxes</a>
            <a href="login.html">Login</a>
            <a href="signup.html">Signup</a>
        </div>
    </div>
    <div class="right">
        <a href="account.html" id="account">
            <i class="material-icons">account_circle</i>
        </a>
    </div>
</div>

Edit: Wait wait, sorry for the unclear question.
Here’s the problem I’m faced with

There are these gaps outside of the links but I can’t seem to find the problem, is it normal or not? And also, thanks for the tip about the justify-content: flex-start;

Comments

Comment posted by CBroe

.links { display: flex; }

Comment posted by juzraai

You explicitly set a

By