Jari Flederick Jari Flederick - 2 months ago 7
CSS Question

I can't center my menu on HTML

So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.

My CSS/HTML code is:



body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>

<BODY>
<H1>Scouts Permeke</H1>

<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li><a href="scouts_news.html">Nieuws</a>
</li>
<li><a href="scouts_contact.html">Contact</a>
</li>
<li><a href="scouts_over.html">Over</a>
</li>
<li><a href="scouts_fotos.html">Foto's</a>
</li>
<li><a href="scouts_activiteiten.html">Activiteiten</a>
</li>
<li><a href="scouts_papierwerk.html">Papierwerk</a>
</li>
<li><a href="scouts_afspraken.html">Afspraken</a>
</li>
<li><a href="scouts_uniform.html">Uniform</a>
</li>
<li><a href="scouts_technieken.html">Technieken</a>
</li>
<li><a href="scouts_jaarthema.html">Jaarthema</a>
</li>
<li><a href="scouts_rituelen.html">Rituelen</a>
</li>
<li><a href="scouts_verhuur.html">Verhuur</a>
</li>
<li><a href="scouts_inschrijven.html">Inschrijvingen</a>
</li>
</ul>

<div class="spacer">
&nbsp;
</div>

<img src="groepsfoto.jpg" width="100%" " >

<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>





Many thanks in advance.

Answer

Add to your ul in your Stylesheet this:

text-align: center;

and replace from li

float: left;

with this

display: inline-block;

That could do it.

Hope this helps.