Bootstrap icon wrong positioning - html

Question

I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>

Answer 1

Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/

Answer 2

You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle