HTML and CSS for Navigation

CSS – style.css

body {
 text-align: center;
}
.container {
	max-width: 1000px;
	min-width: 640px;
	margin: 0px auto 0px;
}
div {
	margin: 0px;
    padding-top: 1%;	
}
header {
 min-height: 200px;
 border-top: 1px dotted gray;

}
header h1 {
 color:rgb(112,32,209);
 font-size:74px;
}
nav {
 border-top: 1px dotted gray;
 border-bottom-style: solid;
 border-bottom-color: red;
 border-bottom-width: 1px;
 height: 50px;
 font-size: 20px;

}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 14px 0px;
	background-color: #333333;
}
nav ul li {
	display: inline;
	font-weight: bold;
}
nav ul li a { 
	color: #ffffff;
	text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav ul li a:link {
    text-decoration: none;
	background-color: blue;
}

nav ul li a:visited {
    text-decoration: none;
}

nav ul li a:hover {
	color: blue;
    text-decoration: underline;
	background-color: yellow;
}

nav ul li a:active {
    text-decoration: underline;
}
nav ul li.active {
	font-style: italic;
	color: gray;
}
#content, #content div {
 min-height:200px;
}

aside {
 float: left;
 width:23%;
 margin: 20px;

}
main {
 border-left: 1px dotted gray;
 float: right;
 width:70%;

}
footer {
 border-top: 1px dotted gray;
 background-color: #bfcbff;
 vertical-align:bottom;
 min-height: 100px;

}
table, th, td {
 border: 1px dotted gray;
 border-collapse: collapse;
}
.red {
 color: red;
}

.clearfloat {
 clear: both;
 min-height: 0px !important; 
 height: 0px;
}

Home Page – home.htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Home Page</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
		<header>
			<h1>HOME PAGE</h1>
		</header>
		<nav>
		    <ul>
				<li class="active">Home</li>
				<li><a href="service.htm">Services</a></li>
				<li><a href="terms.htm">Terms</a></li>
				<li><a href="contact.htm">Contact Us</a></li>
				<li><a href="about.htm">About Us</a></li>
			</ul>
		</nav>
		<div id="content">
			<aside>
				Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area
			</aside>
			<main>
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
				
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
			</main>
			<div class="clearfloat">&nbsp;</div>
		</div>
		<footer>
			<p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p>
		</footer>
	</div>
  </body>
</html>