Navigation nicht korrekt zentriert mit CSS?

Question

Bevor ich mich mit meinem Thema beschäftige, sollte ich erwähnen, dass ich ein Designer bin, der in den Webentwicklungsraum einzieht. Ich erstelle hauptsächlich Grafiken und Branding-Bilder für Unternehmen, also ist dies ein neuer Bereich für mich außerhalb von WordPress.

Ich bin gerade dabei, ein neues Projekt zu erstellen und die Seite komplett neu zu programmieren, um die Fähigkeiten zu erlernen, die in dieser Karriere benötigt werden.

Mit diesem gesagt, ich versuche, meine Hauptnavigation auf der Seite zentriert zu bekommen. Mein Plan ist, das Logo auf der linken Seite zu schweben, Hauptnavigation Floating in der Mitte, und die Probe/Anmeldung im Abschnitt schwebt auf der rechten Seite.

Hier ist mein aktueller Code. Ich kann nicht herausfinden, wie man den Hauptnavigationsteil zentriert, sogar nach der ganzen Forschung! Jede Hilfe würde sehr geschätzt werden.

Meine aktuelle HTML:

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

Meine aktuelle CSS:

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

Mein Logo an der richtigen Stelle ist, sowie das Zeichen in/versuchen, es freien Abschnitt . Die Navigation, die ich zu zentrieren versuche, schwebt jedoch links und berührt das Logo.

Nicht sicher, warum ich downvotes für das Stellen einer Frage empfange?

Answer 1

Wenn ich Webanwendungen mache, benutze ich gerne Bootstrap. Es gibt mir eine Reihe von CSS-Klassen aus der Box, die mir helfen, ein responsives Frontend zu erstellen, das auf jeder Bildschirmgröße das tut, was ich brauche. Kurz gesagt, ich würde Medienabfragen, das Bootstrap-Layout-Raster oder eine Kombination von beiden verwenden.

Es gibt viele Tutorials auf youtube. Dieser Typ zeigt, wie die Grundlagen für das Bootstrap-Layout-Raster funktionieren. https://youtu.be/GDwWmrpCa30

Medienabfragen sind nützlich, wenn Sie auf der Grundlage der aktuellen Bildschirmgröße des Geräts eine andere Benutzeroberfläche benötigen. Dies kann ohne Bootstrap verwendet werden, kann aber auch mit Bootstrap verwendet werden, um wirklich responsive Apps zu erstellen. Dazu gibt es auch unzählige Tutorials auf youtube, aber hier ist ein guter zu sehen. https://youtu.be/2KL-z9A56SQ

Lassen Sie mich wissen, ob ich Ihnen weiterhelfen kann. Viel Glück.