Bootstrap div fields expanding the window - html

Question

I have two div fields that are causing the window to scroll right. I don't understand how to change the weight or length so that the window is only scrolling up and down not left and right.
This is part of the navbar that deals with the dropdown menu
<span class="navbar-text" class="w-25">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Register</a>
<a class="dropdown-item" href="#">Login</a>
<a class="dropdown-item" href="#">Advertise</a>
</div>
</li>
</ul>
This is the dropdown. You can see that when dropdown it expands and you have to scroll right on the page to see the dropdown box
Here are the cards the div box for these are also too big and cause the page to scroll right
<section class="features-icons bg-white text-center">
<h1>
<center><b>Explore Rentals in Island</b></center>
</h1>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<p class="card-text">Location</p>
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<p class="card-text">Location</p>
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="./img/home-icon.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Name</h5>
<p class="card-text">Location</p>
<p class="card-text">Price</p>
</div>
</div>
</div>
<br>
<br>
<button type="button" class="btn btn-primary btn-lg">View More</button>
</section>
Image of the nav bar error
Image of the cardbox error

Answer 1

Consider this code snippet.
section.features-icons.bg-white.text-center{
overflow: hidden;
width: 100%;
}
[aria-labelledby="navbarDropdownMenuLink"]{
margin-left: -53px;
}

Answer 2

Here are the two contributing factors to why your dropdown menu list is so wide:
1) In the dropdown-menu class, the min-width is set to 10rem
2) In the dropdown-item class, the left right padding is set to 1.5rem
If you go to DevTools and disable these two properties, the dropdown will fit within your browser again, but probably a bit too tight around the list items texts.
I would create my own css classes to
1) set min-width of dropdown-menu class to 0rem
2) reduce the left right padding of dropdown-item to something that looks nice but not too wide
I quickly scribbled this together:
.fix-min-width {
min-width: 0;
}
.fix-padding {
padding: 0.25rem 0.75rem;
}
Hope this helps.