Button overflow x in line when the screen is mobile - html

Question

I have a line with buttons. When I reduce the screen I want all the buttons to remain in line and work as an overflow-x: scroll.
My problem is that when reducing the screen, the overflow x works, but the button comes out of the screen.
How can I solve this? Thanks
DEMO
CODE
<div class="row justify-content-center flex-nowrap myrow" style="margin-top: 160px;">
<a style="color: #51CC8B;" class="btnP">PRG
<span class="nav-link btn-glyphicon1">100</span>
</a>
<a style="color: #4981C2;" class="btnR">TRV
<span class="nav-link btn-glyphicon">50</span>
</a>
<a style="color: #4981C2;" class="btnD">DN
<span class="nav-link btn-glyphicon">21</span>
</a>
</div>
Problem

Answer 1

removed row class
and
added d-flex justify-content-md-center classes
and added below css
.myrow {
overflow-x: auto;
}
.myrow {
overflow-x: auto;
}
.btn-glyphicon {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
background: #ffffff;
right: 0;
position: absolute;
background: #DBE7F4 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #4981C2;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
background: #ffffff;
right: 0;
position: absolute;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #51CC8B;
}
.btnR {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #4981C2;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #ECF2F9;
cursor: pointer;
outline: none;
}
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
cursor: pointer;
outline: none;
}
.btnD {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #4981C2;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #ECF2F9;
cursor: pointer;
outline: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex justify-content-md-center flex-nowrap myrow" style="margin-top: 160px;">
<a style="color: #51CC8B;" class="btnP">PRG
<span class="nav-link btn-glyphicon1">100</span>
</a>
<a style="color: #4981C2;" class="btnR">TRV
<span class="nav-link btn-glyphicon">50</span>
</a>
<a style="color: #4981C2;" class="btnD">DN
<span class="nav-link btn-glyphicon">21</span>
</a>
</div>