Empty gap between Divs

Question

So I couldn't really find any answer that will serve my code.

I have this weird gap between the two divs that appears like some of margin

I tried to remove the margin or use line-height change to all divs but the result wasn't good

Any solution will be appreciated

Here's my code: HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header-wrapper">
            <div class="header-logo">
                <p>Logo Here</p>
            </div>
            <div class="header-navBar">
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="links.html">Links</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

* {
    font-family: calibri
}
body {
    background-color: rgb(54, 54, 54);
}

.container {
    margin: auto;
    width: 800px;
}

.header-logo {
    text-align: center;
    background-color: cadetblue;
}

.header-logo > p {
    font-size: 24px;
    text-shadow: 2px 2px darkgray;
}

.header-navBar > nav > ul {
    list-style: none;
    display: flex;
    padding: 0;
    background-color: rgb(120, 216, 184);
}

.header-navBar > nav > ul > li {
   display: inline-block;
   width: 100%;
   text-align: center;
}

.header-navBar > nav > ul > li > a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 5px;
}
.header-navBar > nav > ul > li > a:hover {
    background-color: rgb(104, 177, 154);
}

Result (image)

Empty gap between Divs

0 Answers0