Unexplainable vertical gap between my navbar and the div below it

There is currently an unexplainable gap between my nav element and the div element that's below it.

Using inspect element on said gap refers me to the body. Meaning that there's literally nothing in that gap. I've used Chrome developer tools to check the margin and padding of every element that exists in the html file already and from what I can see there really isn't anything that should be causing the gap.

Here's the code. Running the code snippet in a new window would be best:

/* Load required font faces */
@font-face {
    font-family: Nunito;
    src: url("../fonts/Nunito/Nunito-Regular.ttf") format('truetype');
    font-weight: normal;
}

/* CSS for text */
p, a, h1, h2, h3 {
    font-family: Nunito;
}

/* CSS Styles for body */
body {
    margin: 0 !important;
}


/* CSS Styles for the Navbar */
nav {
    height: 8vh;
    padding: 0% 2% 0% 2%;
    background-image: linear-gradient(to right, #00B9FF, #9316FF);
}

nav a {
    color: white;
    font-size: 1.5em;
    text-decoration: none;
}

nav a:hover {
    color: #adadad;
}

#nav-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}

#nav-content {
    width: 100%;
}

.nav-logo {
    float: left;
}

#nav-navigation {
    width: 20%;
    float: right;
    margin: 0;
}

.nav-button {
    display: inline-block;
    margin: 0% 2% 0% 2%;
}

/* CSS for the page header */
#page-header {
    height: 9vh;
    background-color: #F3F3F3;
}

<html>
    <head>
        <title>Webpage</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <!-- Navbar -->
        <nav>
            <div id="nav-wrapper" class="align-middle">
                <div id="nav-content">
                    <!-- Company name on the left of navbar -->
                    <div class="nav-logo">
                        <a href="./">Company Name</a>
                    </div>
                    <!-- Navigation buttons for the navbar -->
                    <ul id="nav-navigation">
                        <li class="nav-button">
                            <a href="./">Nav 1</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 2</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 3</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 4</a>
                        </li>
                        <li class="nav-button">
                            <a href="./">Nav 5</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Main content -->
        <div id="page-header">
            <div>
                <div>
                    <p>About Company Name</p>
                </div>
                <div>
                    <p>Over here at company....</p>
                </div>
            </div>
        </div>
    </body>
</html>

Any help would be welcome. Thank you.

Solution

The "p" element in the "page-header" div is causing the gap. Elements may have a default margin or padding. You can reset all default margins and paddings at the beginning of your css file like this:

* {
  margin: 0;
  padding: 0;
}

or you can select that certain "p" element and remove its margin.