Header lines top and bottom - html

Question

I would like to have a white line under the navigation and bevor the section starts (as shown in the picture). They should be in the header and not in the navigation. So when I scroll it's not locked on the top.
I'm using Bootstrap 4.
The biggest problem I have is, how to set spacing right. Or do I need to have the lines own div's? What is the best way?
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg">
<div class="container py-5">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<div class="align-items-center row justify-content-center">
<button type="button" class="btn btn-light">zu meinen Dienstleistungen</button>
</div>
</div>
<!-- container -->
</section>
.line {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;

Answer 1

For an easy control of spacing, you can just use <hr> elements like shown in the code snippet below.
For example, <hr class="mb-4" style="background: white;"> sets margin-bottom to 4 units.
Working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header class="hero-bg">
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-info fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg bg-info">
<div class="container py-5">
<hr class="mb-4" style="background: white;">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="https://placehold.it/240x120" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<div class="align-items-center row justify-content-center">
<button type="button" class="btn btn-light">zu meinen Dienstleistungen</button>
</div>
<hr class="my-3" style="background: white;">
</div>
<!-- container -->
</section>
Also, hr elements can be easily styled in a number of ways.
Here are a few ideas: https://css-tricks.com/examples/hrs/