I'm working on a fixed navbar, which stays at the top of the screen while scrolling, but when I give my navbar the `position:fixed` attribute, the rest of the content slips under it and my page looses the navbar's height. To be more specific, my navbar is 80px tall and when I change into fixed, the marquee (the following div) qoes 80px higher under the navbar. I have resolved it with kind of a "quick fix", adding and extra `nav-background` div with the height of my navbar to the top of my page, so it seems like my navbar doesn't float above anything in top position, but how can I resolve the case with a "professional" method?

```css
#navbar {
 margin:0px;
 height:80px;
 width:100%;
 z-index:103;
 background-color:rgba(255,255,255,.8);
 position:fixed;
}

#logo {
 display:inline-block;
 float:left;
 padding: 15px 0px 15px 0px;
 margin-left:100px;
}

#logo_img {
 max-height:50px;
}

#anchor-links {
 display:inline-block;
 float:right;
 height:80px;
 padding: 15px 0px 15px 0px;
 margin-right:150px;
}

.nav li {
 display:inline-block;
}

.nav a {
 text-decoration:none;
 color:#6f8595;
 font-size:16px
}

#nav-background {
 height:80px;
}

.marquee {
    border:1px solid red;
 font-size:16px;
 height:630px;
 width:100%;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="navbar">
   <div class="row">

    <div id="logo" class="logo">
     <a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
    </div>

    <div id="anchor-links">
      <ul class="nav">
       <li><a data-scroll href=".marquee">Home</a></li>
       <li><a data-scroll href="#about">About</a></li>
       <li><a data-scroll href="#services">Services</a></li>
       <li><a data-scroll href="#portfolio">Portfolio</a></li>
       <li><a data-scroll href="#footer">Contact</a></li>
      </ul>
    </div>

   </div>
 </div>
 <div id="nav-background" class="clearfix"></div>
 <div class="marquee"></div>
```