My container has a background image attached, but it only fits half of the columns before overflowing and cutting off the background image. I've tried using min-height, but the issue persists. The two columns are housed within a container and contain multiple rows. I can't seem to figure out why the container is not expanding along with the columns.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
<a href="#" class="btn btn-lg btn-secondary">Button</a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>