Remove spacing between navbar and image

Question

I have a Navbar with logo and links spaced out appropriately, in the hero section I use an image with full width and height but if leaves a white space between the nav and hero section. I have searched for how to address this but cannot seem to figure it out.

How can I remove the space between the Nav and next section?

Example Image: https://ibb.co/7YcTg4p

*Solved - After adding overflow: auto; inside the #container-bg {} class the white space collapsed and now the nav follows the next section with any space issues.

        <header>
            <img 
            src="https://cdn.pixabay.com/photo/2017/09/26/21/45/spiral- 
            2790215__480.png"/>
            <nav class="nav-container">
                <ul>
                    <li><a href="index.html" class="active">Home</a> 
                    </li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </nav>
        </header>
      <div id="container-bg">
            <div class="content-wrapper">
                <h1>Sample text</h1>
                <p>More sample text</p>
                <a href="/contact.html">Contact </a>
            </div>

CSS


   
    
    header img {
        width: 40px;
        position: relative;
        left: 120px;
        top: 15px;
    }
    
    .nav-container {
        float: right;
    }
    
    .nav-container ul {
        margin: 0;
    }
    
    .nav-container ul li {
        display: inline-block;
    }
    
    .nav-container ul li a {
        text-decoration: none;
        padding-right: 60px;
        position: relative;
        font-size: large;
        color: black;
        top: 22px;
        right: 120px;
        margin: 0px 0px 0px 20px;
        padding: 0px 4px 6px 4px;
    }

    #container-bg {
    background: url(img/img-bg.jpg) no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    }

    .content-wrapper {
        margin: 0 auto;
        width: 80%;
        text-align: center;
        position: relative;
        top: 30%;
    }
    
    .content-wrapper a {
        background-color: blue;
        color: white;
        border-radius: 15px;
        text-decoration: none;
        text-transform: uppercase;
        border: 1px solid #ffffff;
        padding: 12px 18px;
        font-size: 22px;
        cursor: pointer;

Unclear what you are asking. _“leaves a white space between the two sections”_ - where exactly? Please provide an example that actually shows this. — CBroe, May 05 '21 at 10:40
My apologies, I have added an image example in the main post. — PT-83, May 05 '21 at 10:43
Google for this: https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element - your ```h1``` margin is pulling down the parent container. — prettyInPink, May 05 '21 at 10:53
Thank you @prettyInPink it wasent the h1 but ```overflow: auto;``` needed to be added in ```#container-bg``` which I got from reading the link you posted! Thank you! — PT-83, May 05 '21 at 11:31

score -1 · Accepted Answer · answered May 05 '21 at 11:08

-1

I think I did not understand the question but it may help

.content-wrapper {
  margin: 0 auto;
  width: 80%;
  text-align: center;
  position: relative;
  top: 0%; // here is the trick
}

answered May 05 '21 at 11:08

hakan akgül

16
2

Hi thanks for you response, however by editing top: 0%; it pushed up my h1 to the very top. – PT-83 May 05 '21 at 11:30

score -1 · Answer 2 · answered May 05 '21 at 11:40

-1

After adding overflow: auto; inside the #container-bg {} class the white space collapsed and now the nav follows the next section without any spacing or gap issues.

answered May 05 '21 at 11:40

PT-83

309
5
18

Remove spacing between navbar and image

2 Answers2