Hi there GrumpyYoungMan,
does this help...
HTML
<body>
<header>
Welcome
[
<ul>
<li>Log In</li>
<li>:</li>
<li>Register</li>
</ul>
]
<h1>My Company Name</h1>
</header>
<nav>
[
<ul>
<li><a href="?#Services">Services</a></li>
<li>:</li>
<li><a href="?#About">About</a></li>
<li>:</li>
<li><a href="?#Contact">Contact</a></li>
</ul>
]
</nav>
</body>
CSS
* {
padding: 0;
margin: 0;
list-style-type: none;
box-sizing: border-box;
}
body {
background: #faf0e6;
font: normal 1em / 1.6em Georgia, 'Times New Roman', Times, serif;
}
h1,h2,h3 {
padding: 1em 0.5em;
}
h2 {
background: #caf0f8;
}
header, footer {
padding: 1em 0.5em;
background: #0077b6;
color: #fff;
}
header ul {
display: inline-block;
}
header li {
display: inline-block;
}
header h1 {
background-color: #fff;
color: #000;
}
nav {
padding: 0.8em 0.5em;
background: #03045e;
font-size: 1.25em;
text-align: right;
color: #fff;
}
nav ul,
nav ul li {
display: inline-block;
}
nav li a {
font-weight: bold;
color: inherit;
text-decoration: none;
}
nav li a:hover {
color: #f00;
}
coothead