index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <section href="Navbar_Box"> <div class="topnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </section> </body> </html> stylesheet.css: /* Tells the page the origin is at 0 */ body, html { margin: 0; padding: 0; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: #04AA6D; color: white; }nav { /*POSITION:*/ position: fixed; /*BACKGROUND COLOR*/ background-color: #344e41; /*TEXT ALIGN*/ text-align: center; /*POSITION DETAILS*/ top: 0; left: 0; /*WIDTH*/ width: 100%; }<!DOCTYPE html> <html> <head> <style> /* CSS for Navigation Bar */ ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.navbar li { float: left; } ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.navbar li a:hover { background-color: #111; } </style> </head> <body> <ul class="navbar"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>