Seitennavigation für HTML

Question

Ich habe eine seitliche Navigationsleiste für eine Website erstellt. Ich stoße jedoch auf ein Problem, bei dem die Font Awesome Icons beim Schließen nach unten gedrückt werden. Wenn ich sie wegnehme, öffnet/schließt sich die Navbar über die Links. Der Code ist auf codepen

Hier ist der HTML

<nav class="navbar navbar-custom"> 
<section class="container-fluid"> 
    <section class="navbar-header"> 
     <button type="button" onclick="openMenu()" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <brand class="navbar-brand">Menu</brand> 
    </section> 
</section> 

ist

<nav id="sideNav" class="sideNav"> 
<a href="javascript:void(0)" onclick="closeMenu()" class="fa fa-times" aria-hidden="true"></a> 
<a href="#">About<i class="fa fa-info" aria-hidden="true"></i></a> 
<a href="#">Projects</a> 
<a href="#">Contact</a> 

Hier ist die CSS für die Seite nav

.sideNav { 
height: 100%; 
width: 0; 
position: fixed; 
z-index: 1; 
top: 0; 
left: 0; 
background-color: white; 
overflow-x: hidden; 
padding-top: 60px; 
transition: 0.5s; 
} 

.sideNav a , i{ 
display: block; 
text-decoration: none; 
transition: 0.3s; 
font-size: 1.5em; 
padding: 5px 5px 5px 20px; 
} 


.sideNav .fa-times { 
position: absolute; 
top: 20px; 
right: 25px; 
font-size: 1.5em; 
margin-left: 50px; 
text-decoration: none; 
} 

Gibt es someth falsch in der CSS?

Answer 1

.sideNav a , i{ 
display: block; 
} 

ist das Problem.

Es sollte

.sideNav a 
    { 
    display:block; 
    } 

.sideNav a i{ 
    display: inline-block; 
    } 

Answer 2

bearbeiten sein: Das Symbol als Inline angezeigt werden müssen.

.sideNav a i { 
    display: inline; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 1.5em; 
    padding: 5px 5px 5px 20px; 
    overflow-x: hidden; 
} 

Link to Codepin