How can I prevent a Dropdown from overflowing from the screen?

Question

please?

I have this problem

The dropdown menu is overflowing from the screen, end I don't know how to prevent that, I'm using Bootstrap, also I didn't add any CSS for the nav. also the nav menu is not in a .container or container-fload div.

Do you know a trick to avoid that ugly effect?

Here is the nav code

<!-- Inicio Nav -->
    <header th:fragment="header">
        <nav class="navbar navbar-expand-lg navbar-dark indigo darken-4 d-flex">
            <a class="navbar-brand" href="#"> <i class="fa fa-cubes fa-lg"
                aria-hidden="true"></i>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarNav" aria-controls="navbarNav"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" th:href="@{/listar}">Clientes</a></li>
                </ul>

            <!--  Dropdown User Logged -->
                <ul class="navbar-nav ml-auto mr-5" sec:authorize="!isAuthenticated()">
                    <li class="nav-item">
                    <a class="nav-link" th:href="@{/login}">
                    Login
                    <i class="fas fa-sign-in-alt"></i>
                    </a>
                    </li>                   
                </ul>
                <!-- Dropdorn user Logged fin  -->          


                <!--  Dropdown User Logged -->
                <ul class="navbar-nav ml-auto mr-5" sec:authorize="isAuthenticated()">
                <li class="nav-item dropdown">
                    <!--  Trigger -->
                    <a class="nav-link dropdown-toggle" 
                    id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" 
                    aria-expanded="false">              
                    <span sec:authentication="name"></span>
                    </a>
                    <!--  Trigger FIN -->

                    <!--  DROP DOWN OPTIONS -->
                    <div class="dropdown-menu dropdown-primary"
                    aria-labelledby="navbarDropdownMenuLink">                                                   
                    <form th:action="@{/logout}" method="post" id="logoutForm" class="w-50">                    
                    <button type="submit" class="dropdown-item"
                    onclick="document.getElementById('logoutForm').submit();">
                    Cerrar Session
                    <i class="fas fa-power-off"></i>
                    </button>                   
                    </form>
                    </div>
                    <!--  DROP DOWN OPTIONS FIN-->                          
                </li>
                </ul>
                <!-- Dropdorn user Logged fin  -->

            </div>
        </nav>
    </header>
    <!-- Fin nav  -->

I would like to highlight that it is code for a project using thymeleaf but it does not influence anything with bootstrap I think

Css code

/*estilos para ntificaciones*/
.z-index{
    position: absolute;
    z-index: 3000;
}

/*Estilos para botones*/
.btn-rounded{
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}

.btn-indigo:hover {
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(91,58,180,1) 100%);
}

.btn-secondary:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(58,117,180,1) 100%);
}

.btn-light:hover{   
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
    }
.btn-danger:hover{  
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
    }

.btn-deep-purple:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}

.btn-primary:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}

.btn-info:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(180,58,58,1) 100%);
}
/*-estilos de boton file upload*/   

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  margin-top: 20px;
  border: 4px dashed gray;
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  background-color:#9fa8da;
  border: 4px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: gray;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #303f9f ;
  border: none;
  padding: 10px;
  border-radius: 4px; 
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #ff1744;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}

/*Texto especial*/
.h5{
    font-family: "Lucida Console", Courier, monospace;
}

/*Estilos del login*/
svg{

    position: fixed;
    z-index: -1

}
.img-login{
position:fixed;
z-index:0;
height: 570px;
width: auto;
}

.margin-top-form{

}
.btd:hover{
    background: linear-gradient(108deg, rgba(253,29,115,1) 0%, rgba(91,58,180,1) 100%);
}
.margin-top-form{
    margin-top: 10%
}

.w-90{
    width: 90%;
}

Answer 1

add the class dropdown-menu-right it must work in bootstrao 4

Answer 2

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

Please add this one in your header section and try it.