Forcing a single horizontal Nav in Bootstrap 4 - html

Question

I am attempting to have a horizontal navbar, containing three equally sized nav-pills.
When I drop down to a smaller screen resolution (iphone 5) the third item always drops to a new line, and grows to full width.
How do I achieve a single line horizontal layout for all reasonable resolutions?
It does work when I set the py-1 class to py-0 but I like the look of extra padding.
<div class="container-fluid">
<section class="container py-1">
<div class="row">
<div class="col-md-12 align-content-center">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/home">Home</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item px-1 ">
<a class="nav-link active " href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>
</div>
</section>
</div>

Answer 1

It seems you have a number of extra containers (which you don't need) -
I removed the containers and added extra CSS for the padding (you can remove it/adjust it if you wish)
Updated
I also reduced the container's left/right padding (from 15px to 5px) to make room for the pills in iPhone 5/SE resolutions as per OP's comment - see image below
See demo below
/* this gives you extra padding on the right-left of each menu item */
.nav-pills li.nav-item {
padding: 0 2px;
}
.container-fluid {
padding-right: 5px !important;
padding-left: 5px !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<ul class="nav nav-pills nav-fill navtop">
<li class="nav-item">
<a class="nav-link active" href="https://example.com/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/meetings">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://example.com/courses">Courses</a>
</li>
</ul>
</div>