Making the width of color behind dropdown header items auto adjust to type

Site URL: https://tulip-rabbit-an7w.squarespace.com/config/design/custom-css

Do you have a css code to tell the color behind the menu items for the dropdown to adjust automatically to the longest line?

Here is what I have to date:

/* Change dropdown menu background */
/* Remove dropdown padidng */
.header-nav .header-nav-item--folder .header-nav-folder-content {
   background: #f5f5f7 !important;
}
/* Remove dropdown padidng */
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: auto;
}
.header .header-nav-wrapper a {
    white-space: nowrap;
}

Obv I am a super novice at adding css coding

Your site is private. Can you setup password & share url again?