How to remove gap between divs

[CodeingMAN]

I have two divs they have a gap in between them how do I get rid of that gap?

Code

<div class="area">
        <header class="header">
            <div class="brand-box">
                <span class="brand">JW Code Me</span>
            </div>

            <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">CODING IS OUR THING</span>
                    <span class="heading-primary-sub">Public lessons, private lessons and more! What else can we
                        do?</span>
                </h1>
                <a href="#" class="btn btn-white btn-animated" disabled>Lessons</a>
                <br />
                <br />
                <a href="#" class="btn btn-white btn-animated" disabled>Hire Me</a>
            </div>
        </header>
    </div>

<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->
<!-- THE GAP PROBLEM -->

    <div class="ban1">
        <h1>Get Lessons on HTML for
            <s>$10.00/1 lesson</s> <i><b>$5.00/1 lesson</b></i>
        </h1>
        <h3>🎉30 money back guarantee🎉</h3>
        <br />
        <br />
        <button>Take The Lesson!</button>
        <div class="container">
            <h1 id="headline">Deal Ends In:</h1>
            <div id="countdown">
                <ul>
                    <li class="li"><span id="days"></span>days</li>
                    <li class="li"><span id="hours"></span>Hours</li>
                    <li class="li"><span id="minutes"></span>Minutes</li>
                    <li class="li"><span id="seconds"></span>Seconds</li>
                </ul>
            </div>
            <div id="content" class="emoji">
                <span>😮😨</span>
                <span>Deal Ended!!!</span>
                <span>😮😨</span>
            </div>
        </div>
        <p style="font-size: 10px; text-align: center;">Our Terms of use and Privicy Policy all apply.</p>
    </div>

/*Code for the class called "area"
AKA the header
 */

.header {
    height: 100vh;
    background-image: url("https://cdn.glitch.com/109171b3-51e3-4c5d-9dd5-96694357fbdc%2FHeader_background_img.jpg?v=1620931002447");
    background-size: cover;
    background-position: top;
    position: relative;
    width: 100%;
}

.brand-box {
    position: absolute;
    top: 40px;
    left: 40px;
}

.brand {
    font-size: 20px;
}

.text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.heading-primary {
    color: #fff;
    text-transform: uppercase;
    backface-visibility: hidden;
    margin-bottom: 30px;
}

.heading-primary-main {
    display: block;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 5px;
}

.heading-primary-sub {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 7.4px;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 100px;
    transition: all 0.2s;
    position: relative;
    cursor: not-allowed;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background-color: #fff;
    color: #777;
    font-size: 14px;
}

header {
    background: #27363f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}

/*Code for the class called "ban1"
AKA the first banner
 */

.box1 {
    font-family: Consolas, 'Courier New', monospace;
    display: flex;
    align-items: center;
}

.box1 span {
    margin: auto;
    margin-top: 0; 
}

.box1 p {
   font-family: Arial;
}

[medaminefh]

What are the two divs you want to fix them? a class name or an id would be helpful

[a_aramini]

I tested the code in FF, Chrome, Edge, CodePen and didn’t see the issue. Maybe they already fixed it?

[tlc35us]

If I put only the code you listed into a codepen and use the Chrome browser, the h1 margin-top goes up against the img. It would be nice to see everything online. I agree with @medaminefh . It’s like you left out the code for the two divs.

Your code:

without h1 magin-top:

[CodeingMAN]

I do not see any margin-top; in the code.

[tlc35us]

The browser has an internal stylesheet. Headings have margin to provide whitespace around them and set them apart from the surrounding text. As you can see in the first screenshot there is margin in orange.

[CodeingMAN]

Then do I simply do margin: none;?

[lasjorg]

That should be margin: 0 if you want to remove all margin. Or just margin-top: 0 for the gap you are talking about in the first post.

[tlc35us]

What @lasjorg said. That’s shown in the second screenshot. I put the blue background in the div to see if there was truly a gap or if was just whitespace for the h1.