如何将导航内容居中？

Question

My navigation content is up there isn't centered and I do not know why. Any help or possible fix would help me! I am lost I tried everything so far I have read on google and you will see in my code what I have tried so far.

Here's the code:

 ul li { list-style: none; } html { font-family: "Roboto", serif; } .navigation { position: fixed; width: 100%; text-align: center; font-size: 14px; font-size: 0.875rem; line-height: 1.5em; height: 180px; font-family: "Roboto", serif; transition: all 0.5s ease; display: flex; justify-content: center; align-items: center; z-index: 99999; background-color: rgba(175,213,123,0.70); } .navigation ul { display: flex; flex-direction: row; margin: 0; padding: 0; z-index: 1; } .navigation ul li { float: left; padding: 0 20px; text-decoration: none; text-transform: uppercase; color: #222222; margin: -12px 0; letter-spacing: 0.200em; transition: all 0.5s ease; } .navigation ul li:hover { color: #ffa947; cursor: pointer; } @media (min-width: 0) and (max-width: 770px) { .navigation ul li { margin: 17px 0; } } .navigation ul li.reg { font-size: 10px; font-size: 0.625rem; } @media (min-width: 0) and (max-width: 770px) { .navigation ul li.reg { display: none; } } .navigation ul li.title { font-size: 24px; font-size: 1.5rem; } .navigation h1 { font-size: 24px; font-size: 1.5rem; color: #222222; font-weight: 300; z-index: 1; margin: 0; padding: 0; letter-spacing: 10px; } @media (min-width: 0) and (max-width: 770px) { .navigation { flex-direction: column; height: auto; } } .navigation.sticky { height: 55px; background-color: rgba(175,213,123,1); } .navigation.sticky::after { opacity: 1; filter: alpha(opacity=100); } .navigation.sticky ul li { margin: 0; } @media (min-width: 0) and (max-width: 770px) { .navigation.sticky { height: auto; } .navigation.sticky .title { margin: 17px 0; } } .navigation .hidden { visibility: hidden; height: 0; display: none; } @media (min-width: 0) and (max-width: 770px) { .navigation .hidden { display: flex; flex-direction: column; margin: 0; padding: 0; float: left; } .navigation .hidden li { margin: 0; padding: 10px 0; transition: all 0s; } } .navigation .hidth { display: none; } .navigation .switch .hidth { display: block; } .navigation .switch .unhid { display: none; } .navigation .hidden.showmenu { visibility: hidden; height: 0; display: none; } @media (min-width: 0) and (max-width: 770px) { .navigation .hidden.showmenu { visibility: visible; height: auto; display: block; } .navigation .hidden.showmenu li { width: 100%; float: left; transition: all 0s; } .navigation .hidden.showmenu li:last-child { padding-bottom: 30px; } } .navigation .bar { display: none; margin: 17px 0; font-size: 21px; } @media (min-width: 0) and (max-width: 770px) { .navigation .bar { display: block; } } .navigation .bar:hover { cursor: pointer; }

 <nav class="navigation"> <ul> <a href="#"><li class="reg goHome">Kleingartenverein</li></a> <a href="#"><li class="reg goug">UrbanGardening</li></a> <a href="#"><li class="title gotop">GARDEN7</li></a> <a href="#"><li class="reg goGalerie">Galerie</li></a> <a href="#"><li class="reg goKontakt">Kontakt</li></a> <span class="bar"> <i class="fa fa-bars unhid" aria-hidden="true"></i> <i class="fa fa-times hidth" aria-hidden="true"></i> </span> </ul> <ul class="hidden"> <a href="#"><li class="goHomemob">Kleingartenverein</li></a> <a href="#"><li class="goKleingartenvereinmob">Urban Gardening</li></a> <a href="#"><li class="goGaleriemob">Galerie</li></a> <a href="#"><li class="goKontaktmob">Kontakt</li></a> </ul> </nav>

I would appreciate a look on my problem and a possible fix ! Thank you in advance!

Answer 1

Try fixing the width of each menu item:

 ul li { list-style: none; } html { font-family: "Roboto", serif; } .navigation { position: fixed; width: 100%; text-align: center; font-size: 14px; font-size: 0.875rem; line-height: 1.5em; height: 180px; font-family: "Roboto", serif; transition: all 0.5s ease; display: flex; justify-content: center; align-items: center; z-index: 99999; background-color: rgba(175,213,123,0.70); } .navigation ul { display: flex; flex-direction: row; margin: 0; padding: 0; z-index: 1; } .navigation ul li { float: left; padding: 0 20px; width: 160px; /* add this line */ text-decoration: none; text-transform: uppercase; color: #222222; margin: -12px 0; letter-spacing: 0.200em; transition: all 0.5s ease; } .navigation ul li:hover { color: #ffa947; cursor: pointer; } @media (min-width: 0) and (max-width: 770px) { .navigation ul li { margin: 17px 0; } } .navigation ul li.reg { font-size: 10px; font-size: 0.625rem; } @media (min-width: 0) and (max-width: 770px) { .navigation ul li.reg { display: none; } } .navigation ul li.title { font-size: 24px; font-size: 1.5rem; } .navigation h1 { font-size: 24px; font-size: 1.5rem; color: #222222; font-weight: 300; z-index: 1; margin: 0; padding: 0; letter-spacing: 10px; } @media (min-width: 0) and (max-width: 770px) { .navigation { flex-direction: column; height: auto; } } .navigation.sticky { height: 55px; background-color: rgba(175,213,123,1); } .navigation.sticky::after { opacity: 1; filter: alpha(opacity=100); } .navigation.sticky ul li { margin: 0; } @media (min-width: 0) and (max-width: 770px) { .navigation.sticky { height: auto; } .navigation.sticky .title { margin: 17px 0; } } .navigation .hidden { visibility: hidden; height: 0; display: none; } @media (min-width: 0) and (max-width: 770px) { .navigation .hidden { display: flex; flex-direction: column; margin: 0; padding: 0; float: left; } .navigation .hidden li { margin: 0; padding: 10px 0; transition: all 0s; } } .navigation .hidth { display: none; } .navigation .switch .hidth { display: block; } .navigation .switch .unhid { display: none; } .navigation .hidden.showmenu { visibility: hidden; height: 0; display: none; } @media (min-width: 0) and (max-width: 770px) { .navigation .hidden.showmenu { visibility: visible; height: auto; display: block; } .navigation .hidden.showmenu li { width: 100%; float: left; transition: all 0s; } .navigation .hidden.showmenu li:last-child { padding-bottom: 30px; } } .navigation .bar { display: none; margin: 17px 0; font-size: 21px; } @media (min-width: 0) and (max-width: 770px) { .navigation .bar { display: block; } } .navigation .bar:hover { cursor: pointer; }

 <nav class="navigation"> <ul> <a href="#"><li class="reg goHome">Kleingartenverein</li></a> <a href="#"><li class="reg goug">UrbanGardening</li></a> <a href="#"><li class="title gotop">GARDEN7</li></a> <a href="#"><li class="reg goGalerie">Galerie</li></a> <a href="#"><li class="reg goKontakt">Kontakt</li></a> <span class="bar"> <i class="fa fa-bars unhid" aria-hidden="true"></i> <i class="fa fa-times hidth" aria-hidden="true"></i> </span> </ul> <ul class="hidden"> <a href="#"><li class="goHomemob">Kleingartenverein</li></a> <a href="#"><li class="goKleingartenvereinmob">Urban Gardening</li></a> <a href="#"><li class="goGaleriemob">Galerie</li></a> <a href="#"><li class="goKontaktmob">Kontakt</li></a> </ul> </nav>