Problem: After setting .multicolumn to max-width: 80% with no left/right padding, the section aligned to the right. The goal was to center the multicolumn content on the page.
Suggestions: Add horizontal auto margins to center the block (margin-left: auto; margin-right: auto;) and optionally use text-align: center to center inner text. Note that parent/child CSS could also affect alignment.
Context: The store URL was shared to allow review and confirm styling behavior.
Working solution: Update the CSS to include margin: auto alongside max-width: 80%, padding-left: 0, and padding-right: 0 on .multicolumn. Using margin: auto horizontally centers a block-level element within its container without additional wrappers.
Outcome: The change resolved the issue, and no further adjustments were needed. Discussion concluded as solved.
Hello, I have added this code into the section CSS to adjust the sizing display of the multicolumn content however now it is all aligned to the right and I would like it centered, how can I fix this?
code used:
.multicolumn {
max-width: 80%;
padding-left: 0;
padding-right: 0;
}
Could you share your store URL so we can check?
Hi @girltimebeauty ,
You can try this code,
.multicolumn {
max-width: 80%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
text-align: center; /* Optional, if you want the text centered */
}
Can you provide more information because the CSS of the child and parent classes can also have an impact?
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
https://a12e3c-6c.myshopify.com/ thank you!
Please update your code to this
.multicolumn {
max-width: 80%;
padding-left: 0;
padding-right: 0;
margin: auto;
}
thank you this worked!
You are very welcome