I have a logo and a series of four nav bar unlisted items. I want to put the logo above them, centered and have the four nav bar items also be centered underneath the logo.
Copied below is my Html (first) and my css (second).
* { box-sizing: border-box; margin: 0; padding: 0;}html, body { /* To ensure the background is black across all browsers and scenarios, you can target both html and body and also remove default margins/paddings.*/ margin: 0; padding: 0; background-color: black; /* or #000000 */ min-height: 100vh; /* Ensures the background covers the full viewport height */}body { font-family: 'Lobster'; font-size: 18px; line-height: 1.5;}a { text-decoration: none; color: #fff; /* is this white going to be a problem child that conflicts with the aesthetic? */}ul { list-style: none;}img { max-width: 80%;}.logo { max-width: 75%; max-height: 75%;}/* Navbar */.navbar { padding: 20px;}.navbar .container { display: flex; justify-content: center;}/* Utility Classes unsure if i need these just yet */.container { max-width: 1100px; margin: 0 auto; padding: 0 15px;}.container-sm { max-width: 800px; margin: 0 auto; padding: 0 15px;}<!--Source - https://stackoverflow.com/q/79842379Posted by Thomas TaylorRetrieved 2025-12-09, License - CC BY-SA 4.0--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Reign Gardens Website</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"><!-- Please add icons. Please remember to add another font set for paragraph and testimonial text. Above font is for menu items and headings only.--><link rel="stylesheet" href="css/style.css"></head><body><nav class="navbar"><div class="container"><div class="logo"><a href="index.html"><img src="images/Reign Gardens Logo White.PNG" alt="Logo"></a> </div> <div class="main-menu"> <ul><li><a href="index.html">Home</a></li><li><a href="#">Strains</a></li><li><a href="https://app.leaflink.com/menu/reign-gardens/">Order</a></li><li><a href="#">About Us</a></li></ul></div></div></nav><script src="js/main.js"></script></body></html>