I made a couple of changes. Firstly, I took out margins and padding from the top and also wrapped the header in a div called heading to get the 100% width affect and then center what was the li as a div; so it could be centered. Also, the p is moved into the li so it is part of the unordered list. To gain the nice font, I wrapped it in a span.
* {
margin: 0;
padding: 0;
}
#header{width: 50%; margin-top: 0px;
margin-left: auto;
margin-right: auto;}
#heading{background: #333; width: 100%; height: 50px; margin-top: 0px;}
header
{
text-align: center;
list-style-position: outside;
}
ul li{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
font-size: 15px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkkhaki;
}
span
{
font-family: sans-serif;
color: lightgoldenrodyellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"href="header.css">
</head>
<body>
<div id="heading">
<div id="header">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Agenda</a></li>
<li><a href="">Menu</a></li>
<li><span> Cafe <strong> Welkom</strong></span></li>
</ul>
</div>
</div>
<body>
</html>