Separated space between sections

Hi fellas, i can’t seem to understand why there’s a white space between sections like this. I use background image for each sections.

Maybe you can provide a codepen, It’s highly impossible to sort it out by seeing the screenshot


as @Sujith3021 recommended, showing us some code can be of great assistance.

Furthermore, I would recommend using the Chrome Developer Tools.
It will allow you to see the elements of your HTML markup and understand why there is space between the sections.

My guess? You have surrounded each section element with a div element and maybe that is what is causing the space.

here is my html

<section id="home-section" class="hero fading-section">
            <div class="content" id="content-home">   
                <h1>Flexible services for homestay.</h1>
                <a href="#">
                    <button id="button-join">Join now</button>
        <section id="about-section">
            <div class="content"> 


css part:

.hero {
    overflow: hidden;
    text-align: center;
    color: #fff;

#home-section {
    background: url(/img/beach-clouds-daytime.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 900px;
    opacity: 0.9;
.content {
    overflow: hidden;
    margin: 10em 10em 0 10em;
    padding: 5%;
#content-home {
    animation-name: slidein;
    animation-duration: 5s;
    animation-fill-mode: forwards;

#about-section {
    background: url(/img/architecture-background-buildings.jpg);
    background-repeat: no-repeat;
    background-size: auto 75em;
    width: 100%;
    height: 800px;
    opacity: 0.9;

i have used chrome dev tools but in this case it just couldn’t help

You have set margin in your.content class inside #about-section, remove the top margin


thank you so much! sometimes a little stupid mistake makes me baffled

Yep, it happens.! :wink: