Codepen Bootstrapの間違った書式設定

Question

私はAtomを使ってFreeCodeCamp用の小さなウェブサイトを作成しました。しかし、&のコードをCodePenに貼り付けると、間違ってフォーマットされてしまいました。 hereを参照してください。

下のナビゲーションバーのHTMLとCSSを見つけてください：

<!-- NAVIGATION --> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">10"88</a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

-

/* -- NAVBAR -- */ 
.navbar { 
    margin-bottom: 0; 
} 

.navbar-default { 
    background-color: white; 
    border-color: white; 
    border-radius: 0; 
} 

.navbar-default .navbar-brand, 
.navbar-default .navbar-nav > li > a { 
    color: black; 
} 

.navbar-default .navbar-brand:hover { 
    color: white; 
    background-color: #AE1429; 
} 

.navbar-default .navbar-nav .active > a { 
    color: white; 
    background-color: #AE1429; 
} 

.navbar-default .navbar-nav > li > a:hover { 
    color: white; 
    background-color: #AE1429; 
} 

それが表示されているだかのように私のナビゲーションバー（および画像）に見える理由を私は理解していません小さなビューポート。助言がありますか？

Answer 1

ブートストラップ3アルファベットでブートストラップ3クラスを使用しようとしています。 documentationを見てください：navbar-fixed-topまたはnavbar-defaultはありません。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css の設定でリンクを置き換えても問題ありません。