div-menü zentrieren

[seemarc]

Guten Abend, ich auf meiner Website ein Headermenü durch ein <div>-Element erstellt, unter das ich die Menüpunkte als <a>-Elemente integriert habe. Nun möchte ich das ganze zentrieren jedoch funktioniert meine Herangehensweise nicht. Wäre nett, wenn hier jemand aushelfen könnte.
Mein Versuch:

.topnav-mid{
    display: flex;
    text-align: center;
    align-items: center;
}

 

[seemarc]

Hier noch der ganze Code zum besseren Verständniss.

<div class="logo">
            <img src="img/logo.png" alt="Logo"><a href="index.html"></a>
</div>
        
<div class="topnav" id="idTopNav">
                        
            <a href="index.html" class="icon-home" onclick="none">
                <i class="fas fa-home"></i>
            </a>
        <div class="topnav-mid">
            <a href="#" >eins</a> 
            <a href="#" >zwei</a> 
            <a href="#" >drei</a> 
            <a href="#" >vier</a> 
            <a href="#" >fuenf</a> 
            <a href="#" >sechs</a> 
            <a href="#" >sieben</a> 
        </div>
            <a href="javascript:void(0);" class="icon-menu" onclick="resNavBar()">
                <i class="fas fa-bars"></i>
            </a>
</div>

*{
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
} 

/*Header-Navigation*/
    .logo {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: $main-color-red;
    
    img {
    width: 100%;
    max-width: 500px;
    }
}


.topnav {
    background-color: $main-color-dark-grey;
    overflow: hidden;
}
.topnav a {
    color: $main-color-white;
    display: block;
    text-align: center;
    float: left;
    
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    text-decoration: none;
    padding: 14px 16px;
}
.topnav a:hover {
    background-color: #ddd;
    color: $main-color-red;
}
.topnav .icon-home{
    display: none;
}
.topnav-mid{
    display: flex;
    text-align: center;
    align-items: center;
}
.topnav .icon-menu {
    display: none;
}

/*Header-Navigation: media-querries*/

@media screen and (max-width: 700px) {
    .topnav a {display: none;}
    .topnav a.icon-home{
        float: left;
        display: block;
    }
    .topnav a.icon-menu {
        float: right;
        display: block;
    }
    
}

@media screen and (max-width: 700px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon-home {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a.icon-menu {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
}

 

[Sailor]

Im CSS zu dem '.topnav-mid' noch justify-content: center; hinzufügen.
Und dich nochmals in Sachen FlexBox schlau machen auf https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[seemarc]

Im CSS zu dem '.topnav-mid' noch justify-content: center; hinzufügen.

Ah dankeschön.

Und dich nochmals in Sachen FlexBox schlau machen

Vielen Dank, werde ich machen