Why is there a gap between the header and the main div?-CodePudding

There is a gap between the header and the main that is the same color as the background color I set for the body tag (black). I've tried making overflow: hidden and margin: 0 but that did not work either.

What is causing this gap?

(.menu does not show if the menu button has not been clicked - so display: none)

The CSS:

body {
    color: #fff;
    font-family: Gotham;
    font-weight: 400;
    background-color: #000;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

main {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header {
    height: 3.4rem;
    display: grid;
    align-items: center;
    overflow: hidden;
}

.menu {
    display: none;
    overflow-x: none;
    margin-top: 0;
}

.top {
    background-color: var(--purple);
    top: 0;
    margin: 0;
    padding: 0;
}

The HTML:

<header>
        <div >
            <div >
                <img src="img/logo.jpg" alt="">
            </div>
            <div >
                <img src="img/user.png" alt="">
                <i ></i>
            </div>
        </div>
    </header>
    <nav >
        <div >
            <-- content -->
        </div>
    </nav>
    <main>
        <section >
            <div >
               <-- content -->
            </div>
        </section>
    </main>

How do I get rid of the gap?

CodePudding user response：

I added background-color to header and main to see if there is a gap. There's no gap man? Could you please show where the gap is ?

body {
    color: #fff;
    font-family: Gotham;
    font-weight: 400;
    background-color: #000;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

main {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:red;
}

header {
    height: 3.4rem;
    display: grid;
    align-items: center;
    overflow: hidden;
    background:green;
}

.menu {
    display: none;
    overflow-x: none;
    margin-top: 0;
}

.top {
    background-color: var(--purple);
    top: 0;
    margin: 0;

<header>
        <div >
            <div >
                <img src="img/logo.jpg" alt="">
            </div>
            <div >
                <img src="img/user.png" alt="">
                <i ></i>
            </div>
        </div>
    </header>
    <nav >
        <div >
            <-- content -->
        </div>
    </nav>
    <main>
        <section >
            <div >
               <-- content -->
            </div>
        </section>
    </main>

CodePudding user response：

It turns out that all I needed to do was make the top-container margin-top: 0.

So it looked like:

.top-container {
    margin: 0rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

So to add space between the top of the container and the content, you need to add margin to the actual content not the container.