Margin-left on my expanded toggle button using Bootstrap4 - html

Question

I have made a responsive navbar with bootstrap 4. I have aligned it in the center on tablet and mobile view (on the left on desktop).
However, when I expand it, the button takes a margin-left that I can't erase. I have tried margin-left 0px on the nav, many divs and on the button but it doesn't work it always keep the margin-left. I have also tried placing a !important and being more specific with my classes.
I would really appreciate your help.
You can see my whole page here: https://codepen.io/MiaSalazar/pen/GxBgRe
/*menu principal lateral*/
ul .no-list {
padding-bottom: 2px;
}
.menu-principal {
text-align: right;
padding-bottom: 5px;
padding-left: 0px;
font-size: 15px;
list-style-type: none;
-webkit-transition: width 4s; /* Safari */
transition: width 4s;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #b47068;
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: #b47068;
}
.navbar-dark .navbar-nav .nav-link {
color: #a59391;
}
.nav-menu {
text-decoration: none;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: "Merriweather";
font-weight: 200;
float: right;
border-right: 2px solid #a59391;
line-height: 1.5;
letter-spacing: 1px;
}
.nav-menu-last {
border-right: 0px;
}
nav a:hover {
color: #b47068;
text-decoration: none;
}
.list-inline li {
display: inline;
width: auto;
}
.linea2 {
display: block;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.7rem;
padding-left: 1.5rem;
padding-bottom: 0.5rem;
}
.navbar-toggler {
border-width: 0px;
background-color: #b47068;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
font-size: 20px;
}
#media screen and (max-width: 991px) {
.nav-menu {
border-right: 0px;
margin: auto;
}
.linea2 {
display: inline;
}
.nav-menu {
padding-top: 10px;
}
.xs-center {
display: flex;
justify-content: center;
padding-top: 20px;
}
.navbar-toggler:focus {
outline: none;
}
.ml-auto,
.mx-auto {
margin-left: 0px;
}
div .navbar-collapse .collapse show {
padding-top: 5px;
}
div nav button .toggle-center{
margin-left: 0px;
}
}
<!--Menu-->
<nav class="navbar navbar-expand-lg menu-principal navbar-toggleable-sm navbar-dark navbar-right d-flex" role="navigation">
<button class="navbar-toggler navbar-toggler-right ml-auto toggle-center " type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav no-list">
<li class="nav-item list-inline ">
<a class="nav-link nav-menu" href="#"><span class="linea1">1</span><span class="linea2"> 1</span> </a> </li>
<!--dropdown-->
<li class="nav-item dropdown list-inline">
<a class="nav-link dropdown-toggle nav-menu" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="linea1">1</span><span class="linea2"> 2</span> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Cosa 1</a>
<a class="dropdown-item" href="#">Cosa 2</a>
<a class="dropdown-item" href="#">Cosa 3</a>
</div>
</li>
<!--dropdown final-->
<li class="nav-item list-inline ">
<a class="nav-link nav-menu " href="#"><span class="linea1">1</span><span class="linea2"> 3</span> </a> </li>
<li class="nav-item list-inline ">
<a class="nav-link nav-menu nav-menu-last" href="#"><span class="linea1">1</span><span class="linea2"> 4</span> </a> </li>
</ul>
</div>
</nav>
<!--<fin-menu-->
<!--FIN HEADER-->

Answer 1

I checked the issue in codepen. In the mobile view give "margin: 0 auto;" to your button. Your issue will be fixed.