When working with an unordered list, I encountered a challenge where each list item needed to be a specified width. Due to varying text lengths in the list items and the limitations of editing the HTML directly (as I am modifying a template), I turned to adjusting the CSS instead. By using Inspect Element in my browser, I discovered that the HTML for the list item had the following structure:
<li class="w-menu-item wsite-nav-3" style="position: relative;">
After some experimentation, I attempted to control the width of the list element on the screen by adding the following CSS code:
#navigation .w-menu-item wsite-nav-3 {
width: 5%;
}
However, this approach did not yield the desired result. (#navigation refers to the containing div.) Could it be a syntax error, or is there another issue at play? If this method isn't effective, what would be the correct way to specify the width of the list and its elements?