Dealing with two unruly elements - a fixed navigation menu and background bar causing opacity issues. They should mimic the parent's width, set to 100%, but extend outside when the window is narrowed. Below is a diagram of the html structure:
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
To see the issue in action, visit the page:
When the browser is stretched beyond content max-width, everything looks fine. But when it's narrow, the nav-bar and nav-menu breakpoints outside the content width, missing a 20px padding from the right edge. To observe this clearly, scroll down so the menu covers an image, stretch the browser to max-width, then wiggle back and forth over that threshold.
Any solutions on how to keep the nav-bar and -menu inside the content div?
Omitting CSS details as there are various elements involved, hoping the link suffices for help.
Thank you for your assistance.