Can someone help tweak a couple of code lines?

I’ve posted a string of html code below.
I would like to find a way of
a. making the head width and drop down widths match each other exactly
b. add page links in HREF form to each of the subtitle categories.
Please see coding below

body { font-family: Avenir Light, Playfair Display, sans-serif; }

.navbar {
overflow: hidden;
background-color: #181818;
}

.navbar a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: Playfair Display;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #181818;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #B79259;
font-family: Playfair Display;
min-width: 100%;
z-index: 1;
}

.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #000000;
}

.dropdown:hover .dropdown-content {
display: block;
}

Wix doesn’t work with HTML code, it works with Javascript.

I have tried copying the code into an html box and it does display?

Yes it might display fine in your html iframe, however Wix is javascript based and for your needs you will need to find a programmer who uses html code who will be able to help you with your code

https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site
Important:
Wix cannot provide support for external codes that were not created or tested with Wix. If you are experiencing an issue with your code snippet, please contact the provider directly. .

Would you be able to help if I need commit to using a similar structure for my pages?