Padding percentage on navigation links - css

Question

I need to make this nav-bar responsive and don`t fall down next button.
How can I do that? I make some variations but nothing changed.
http://student.itdc.ge/k.lolishvili/my_slider/

Answer 1

An option using flexbox and FontAwesome icons.
.black {
display: inline-block;
background-color: black;
height: 20px;
width: 40%;
}
.red {
display: inline-block;
background-color: red;
height: 20px;
width: 50%;
}
.slider {
border: 1px solid black;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.slider .prev:before {
font-family: FontAwesome;
content: "\f053";
padding-right: .5em;
}
.slider .next:after {
font-family: FontAwesome;
content: "\f054";
padding-left: .5em;
}
.slider .prev,
.slider .next {
color: white;
background-color: black;
text-decoration: none;
}
.slider .numb {
background-color: white;
margin: 0 20px;
display: inline-block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="slider">
prev
<div class="numb">
2 of 7
</div>
next
<span></span>
<span></span>
</div>
<div class="black"></div>
<div class="red"></div>
</div>