Currently, I am working on a fluid website design where I have set specific min-width and max-width values. However, I want the navigation bar background to extend across the entire screen width without being limited by the max width parameter, while still keeping all <li> elements and other content within the specified widths.
In addition, I also aim to establish a minimum margin for the page (e.g., 16px) to ensure there is always some space between the content and the edge of the page.
The desired outcome can be visualized as shown in the reference image:
Could you provide guidance on how to contain everything within the min-width and max-width parameters while enabling the navbar background to stretch to the screen width? Also, is it possible to maintain a minimum margin value when using margin-left: auto? My attempts so far have been unsuccessful in achieving both simultaneously.
Thank you in advance for any assistance.