Full-width Bars
This page illustrates a common CSS problem where you need an element background to extend beyond its normal boundary.
This heading will extend to the left
Commonly, you'll experience the issue with components such as footers which have text constrained to a certain dimension but a background which stretches the full width of the browser window.
You may also need to implement headings or menu designs like the ones shown on this page.
This heading will extend to the right
Fortunately, you can implement full or partial-width bars in CSS alone without using additional elements.
For more information, please view the source of this page and refer to:
How to Extend Wrapped Elements to the Full Browser Width Using CSS