buttons problems when shrink the page - css

Question

I'm trying to do this nav but when I shrink the page the buttons look terrible.
In desktop mode it works, and only when I shrink the page does it give me problems. The buttons become huge because if there is a long writing it goes to the head:
<section class="main_buttons">
<div class="container d-none d-sm-none d-md-block">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
three long words
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtesttest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
test test test test
<img src="assets/img/..." alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
testtest test testtest
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
test test test
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
testtest test
</div>
</div>
</div>
</div>
</div>
</div>
HERE'S THE STYLE
.nav_btn {
text-align: left !important;
margin: 2px 0;
width: 100%;
background-color: white !important;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
&:hover {
background-color: #0062CC !important;
}
&:hover a {
color:white !important;
}
.contenitore {
width:100%;
display: flex;
justify-content: space-between;
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
}
}
}
.button .sos-button {
border: 2px solid #ff4081;
&:hover {
background-color: #ff4081 !important;
}
&:hover a {
color: white;
}
a {
color: #ff4081 !important;
}
}

Answer 1

Using width with border can sometimes make elements larger than you expect.
You can controlled the button width, out of the .nav_btn. I tried a lot of ways and i think these are the best solution for this situation.
.button {
width: 200px; //You can try like that way
}
.nav_btn {
text-align: left ;
margin: 2px;
background-color: white ;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
}
.nav_btn:hover {
background-color: #0062CC ;
}
.nav_btn a:hover {
color:white ;
}
.contenitore {
display: flex;
justify-content: space-between;
}
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
.button .sos-button {
border: 2px solid #ff4081;
}
.button .sos-button:hover {
background-color: #ff4081;
}
.button .sos-button:hover a {
color: white;
}
a {
color: #ff4081;
}
or try this one.
.nav_btn {
text-align: left ;
width: 200; //or you can try like this one
margin: 2px;
background-color: white ;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
}
.nav_btn:hover {
background-color: #0062CC ;
}
.nav_btn a:hover {
color:white ;
}
.contenitore {
display: flex;
justify-content: space-between;
}
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
.button .sos-button {
border: 2px solid #ff4081;
}
.button .sos-button:hover {
background-color: #ff4081;
}
.button .sos-button:hover a {
color: white;
}
a {
color: #ff4081;
}