HTMLのサイドナビゲーション

Question

ウェブサイトのサイドナビゲーションバーを作成しました。しかし、私は、フォントアウムソムのアイコンが閉じたときにリンクの下にプッシュダウンされるという問題に遭遇しています。私がそれらを奪うと、navbarはちょうど上のリンクを開いたり閉じたりします。コードはここcodepen

上にある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> 

<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> 

はここでサイドナビゲーション

.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; 
} 

ためのCSSがsomethがありますされていますCSSで間違っていますか？

Answer 1

.sideNav a , i{ 
display: block; 
} 

が問題です。 アイコンがインラインとして表示する必要があります

それは

.sideNav a 
    { 
    display:block; 
    } 

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

Answer 2

編集する必要があります。問題を解決していないようだ

.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