I am new and leraning. I didn't even know how to srspond to the first person who sent a comment. Right now, there is no header across the top and the logo and links remain on the left. The links show up underneath in the secondary color green. Below is one versin of the CSS styling code I created. I also have the html. It is close to what mplugin suggested so I don't know why the header doesn't show. Any help is appreciated. Even a good resource to understand why there is a conflict.
:root { --primary-color: #0066cc; --secondary-color: #00cc66; --text-color: #333; --bg-color: #f4f4f4; }.body,html { margin: 0; padding: 0; font-family: "Arial", sans-serif; background-color: var(--bg-color); scroll-behavior: smooth; }.header { background-color: var(--primary-color); color: white; padding: 1rem; position: fixed; display: flex; width: 100%; height: 60px; top: 0; z-index: 1000; }.nav { position: sticky; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; background-color: var(--primary-color); width: 100%; height: 60px; }.logo { display: flex; align-items: center; font-size: 100%; font-weight: bold; align-self: center; }.nav-links { display: flex; line-height: 25px; list-style: none; align-items: center; align-self: center;}.nav-links a { display: flex; padding: 0.25rem 0.25rem; color: white; text-decoration: none; font-size: 1rem; text-transform: uppercase; transition: color 0.3s ease; cursor: pointer;}.nav-links a:hover { color: var(--secondary-color); } .main { margin-top: 4rem; padding: 2rem; }<body><nav><div class="logo">SmartCivic</div><ul class="nav-links"><li><a href="#home">Home</a></li><li><a href="#services">Services</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul></nav><main>