<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizontal Navigation Bar</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="navbar"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </nav> </body> </html> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; } .navbar { background-color: #333; overflow: hidden; } .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } .navbar a.active { background-color: #04AA6D; color: white; }