CSS（ブートストラップ）のナビゲーションバーのロゴがコンテナ内のテキストと揃っていないのはなぜですか？

Question

ブートストラップのナビゲーションバーに自分のロゴのアラインメントに問題があります。 私はそれを私のウェブサイトのコンテンツと整列させたいが、それは左にシフトし続ける。なぜこのようなことが起こり、どのように私はこれを解決することができますか？私は解決策を見つけることができませんでした。

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="/"> 
        <img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}"> 
       </a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <p class="navbar-text project-title">Part Activity</p> 
       <ul class="nav navbar-nav"> 
        <li><a href="about">About</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

CSS：

body { 
    padding-top: 50px; 
} 

.navbar-brand { 
    padding: 18px 0; 
} 

.project-title { 
    color: #cc0000 !important; 
    font-weight: bold; 
} 

.active-row { 
    background-color: #C6EFCE; 
} 

問題：

Answer 1

  Use: col-sm-1 in <div class="navbar-hearder col-sm-1"> 
    If you increase the width 
of the image, you also need to increase: 
    col-sm-2.. 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header col-sm-1"> 
        <a class="navbar-brand" href="/"> 
         <img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}"> 
        </a> 
       </div> 
       <div id="navbar" class="collapse navbar-collapse"> 
        <p class="navbar-text project-title">Part Activity</p> 
        <ul class="nav navbar-nav"> 
         <li><a href="about">About</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    <div class="container"> 
     <h3>Part Activity</h3> 
     <p>Master rsl</p> 
    </div>