Ich habe ausgehend von deinen Informationen den HTML-Code geordnet und korrigiert:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="notice-wrap">
<p class="notice">
Diese Webseite befindet sich im Ausbau.
Informieren Sie den Administrator <a href="mailto:xxxxx">per E-Mail</a> bei Unannehmlichkeiten.
</p>
</div>
<div class="ul-wrap">
<ul>
<li><a class="active" href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="Countdown.html"> Countdown</a></li>
</ul>
</div>
</body>
</html>
CSS:
.ul-wrap {
text-align:right;
background: #333;
}
ul {
display:inline-block;
list-style-type: none;
padding: 0;
overflow: hidden;
background: #333;
opacity: 0.65;
}
li {
float: left;
}
li a {
display: inline-block;
color: #f1f1f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active){
background-color: #111;
}
.active {
background-color: #4CAF50;
}
https://jsfiddle.net/kai_noack/n816borj/
Die Notiz sollte nicht Teil der Navigation sein, semantisch ein Fehler.
Du kannst der Notiz einen Background geben, damit es besser aussieht.
