Navbar spills out right side of Jumbotron. Why?

My nav-links are spilling outside the right side of my jumbotron on small devices. I have no idea how/why, as I thought responsiveness was innate to BS4.

This is my HTML:

<div class="jumbotron container-fluid"> <ul class="nav"> <li class="nav-item"> <a class="nav-link text-white">1-407-555-5555</a> </li> <li class="nav-item"> <a class="nav-link" href="#">For Sale</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Rentals</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Agents</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Why Choose Us?</a> </li> </ul>

<h1 class="display-4 text-white">Haven Realty</h1> <br> <p class="text-white font-weight-bold">Helping you find your safe haven.</p> <p class="text-white font-italic">Don't wait - contact one of our expert agents today:</p> <a class="btn btn-primary btn-lg" href="#" role="button">Contact Us</a> </div>

This is my CSS:

/* Body */

body { font-family: "Raleway"; }

/* Header */

.jumbotron { padding-top: 50px; background: url("http://www.wallpaperscharlie.com/wp-content/uploads/2016/07/Beach-House-HD-Wallpapers-3.jpg") no-repeat center; background-size: cover; }

/* Navigation */

.nav-link { color: white; }

.nav-link:hover { color: black; }

/* Main Page */

.search-form { max-width: 50%; }

/* Footer */

.footer h3, ul { list-style: none; padding-left: 0; }