How do i make this bar in the header go all the way to both sides

Topic summary

Main issue: a header bar wouldn’t stretch full-width; left/right margins remained.

Actions taken: the helper advised editing the theme’s code (theme.liquid) and adding CSS inside the . The referenced code snippet isn’t visible in the thread, but the change made the bar span the full width.

Follow-up: the user wanted the header icons closer to the edges. Guidance: reduce the horizontal padding value (e.g., from padding: 0 100px !important; to a smaller number) to bring items outward.

New problem: when hovering over the last two header menu items, a large right-side margin reappears, indicating a hover-state/layout CSS conflict.

Further advice: apply another CSS adjustment (specific snippet not shown) and set the padding value to the desired amount.

Status: partially resolved. Full-width achieved; spacing tunable via padding. Hover-induced right margin issue remains pending confirmation. Screenshots and the (missing) code snippets are central to implementation.

Summarized with AI on January 4. AI used: gpt-5.

I cant make it fill the margins on the right and left.

Hey @Miguel3403 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

Thanks it seems to have worked do you also have any idea to now make the icons go the left and right a bit more

The value " padding: 0 100px !important;" , just reduce the 100 to something you are comfortable with.

1 Like

Its seems to be mostly working but when i hover above the last two header menus the big margin to the right of the page seems to comeback

Try this,

Just change the 100 value back to whatever you want.