ナビゲーションがCSSで正しくセンタリングされていませんか？

Question

私の関連する問題に没頭する前に、私はおそらくWeb開発空間に移行しているデザイナーだと言及する必要があります。私は主に企業向けのグラフィックスやブランディングイメージを作成しています。したがって、これはWordPress以外の新しい空間です。

私は現在、新しいプロジェクトを作成し、このキャリアに必要なスキルを学ぶためにサイトを完全にコーディングしています。

これで、私はメインナビゲーションをページに集中させようとしています。私の計画は、メインナビゲーションが中央に浮かぶの浮動小数点の左側にロゴを浮かべて、右側に試行/サインインセクションを浮かべることです。

ここは私の現在のコードです。私はどのようにすべての研究の後でも、メインナビゲーション部分を中心にする方法を把握していないようです！ ご協力いただければ幸いです。私のロゴが適切な場所だけでなく、中に/それを試して自由セクション記号である

.container { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

header { 
    background: #2476BB; 
    color: #ffffff; 
    min-height: 100px; 
} 

header a { 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 400; 
    text-decoration: none; 
} 

header li { 
    float: left; 
    display: inline-block; 
} 

header #branding { 
    float: left; 
    display: inline; 
} 

header #mnav li { 
    margin: 0 auto; 
} 

header #unav { 
    float: right; 
    display: inline; 
} 

：

<!--Header Area--> 
    <header> 
     <div class="container"> 
       <div id="branding"> 
        <img src="placeholder.img" alt="Placeholder Text"> 
       </div> 

       <nav> 
        <ul id="mnav"> 
          <li><a href="pricing.html">Pricing</a></li> 
          <li><a href="features.html">Features</a></li> 
          <li><a href="integrations.html">Integrations</a></li> 
          <li><a href="automation.html">Automation</a></li> 
          <li><a href="blog.html">Blog</a></li> 
        </ul> 

        <ul id="unav"> 
          <li><a href="signin.html">Sign In</a></li> 
          <li><a href="trial.html">Try It FREE</a> </li> 
        </ul> 
       </nav> 
     </div> 

    </header> 

私の現在のCSS：私の現在のHTML

。しかし、私が中心にしようとしているナビゲーションは、ロゴに触れたまま浮いています。

なぜ私は質問をするための下降音を受けているのですか？

Answer 1

私はWebアプリケーションを実行するとき、私はブートストラップを使いたいと思っています。それは、私が必要とするものをどんな画面サイズでも実現する、反応的なフロントエンドを作成するのに役立つcssクラスの束を私に提供します。短い話ですが、私はメディアクエリ、ブートストラップレイアウトグリッド、またはその両方の組み合わせを使用します。

YouTubeには多くのチュートリアルがあります。この男は、ブートストラップレイアウトグリッドの基本がどのように機能するかを示しています。 https://youtu.be/GDwWmrpCa30

メディアクエリーは、現在のデバイスの画面サイズに基づいて異なる操作を行う必要がある場合に便利です。これはブートストラップを必要とせずに使用することができますが、本当に応答性の高いアプリケーションを作成するためにブートストラップと共に使用することもできます。それについてもyoutubeには数多くのチュートリアルがありますが、ここではチェックアウトするのが良い方法です。 https://youtu.be/2KL-z9A56SQ

私はさらに援助できるかどうか教えてください。がんばろう。