Hello everyone,
I have a template with a section that has a max width but how do I stop the section then centering the content? I’d ideally like it left aligned
The below is the built in CSS that is centering the content
.dnd_area-row-1-max-width-section-centering > .row-fluid
{ max-width:1100px!important;
margin-left: auto !important;
margin-right: auto !important;
}
Hi, @InciteJoe! Thanks for the question. Hey, @Jnix284, do you have any quick styling tips for @InciteJoe?
Thank you! — Jaycee
Thanks @Jaycee_Lewis happy to help!
Hi @InciteJoe , so basically the “auto” is setting each of the margins to be equal within the allowed width because you have it defined for both the left and the right side (that’s what makes it centered).
If you want to change it to be left aligned instead of centered, you just have to redefine the values for the margin.
You can set the margins in pixels, ems, or percentage.
If you aren’t changing the width, you don’t have to redefine it, but that also depends on where you are adding this (a child.css, page head HTML, or site header HTML) vs if you are modifying the original CSS in the original file.
.dnd_area-row-1-max-width-section-centering > .row-fluid {
max-width:1100px!important;
margin-left: 10px !important;
margin-right: 0 !important;
}
You might need to try a few things out, but let me know if you have questions (a preview page would be helpful to inspect the code directly).
Hello @Jnix284
The only place I set the max width is within the template with the below code, I haven’t manually added any CSS to center the content so it must be coming from the CSS out of the box, here is a link of the page https://axians-7401012.hs-sites.com/incite-newsletter-0 (the section I am referring to is the block of text in the second section)
{% dnd_section max_width=1100,
vertical_alignment=“MIDDLE” %}
{% dnd_column
offset=0,
width=12
%}
Hi @InciteJoe, not sure if you figured it out in the meantime, or if I’m not understanding what you’re trying to do correctly, but when I look at the page provided with the largest width, the content in the second section is left aligned:
It is centered in the section, just like the sections above and below, but they span the full width - I can tell it’s left aligned because the edges of the text on the right are uneven and the button is on the left.
Let me know what I’m missing or if you figured it out 
@InciteJoe when the max_width and veritcal_alignment properties are added to a section, those are translated to CSS and !important selectors are added which will override everything no matter what CSS you add. I have an alternate solution that will work much better.
In my solution, I am assuming you have a CSS file and it’s configured for your theme.
In your section template, remove the max_width and verical alignment properties and add a class property like so:
yoursection.html
{% dnd_section
class="section--left-aligned"
%}
{% dnd_column
offset=0,
width=12
%}
{# rest of your code here #}
{% end_dnd_column %}
{% end_dnd_section %}
Then in your theme CSS add the following lines
yourthemecss.css
/* this will select your class you added to the section and override the default css for the section hierarchy */
/* max width is applied to the child .row-fluid element not the section itself */
.section--left-aligned.dnd-section > .row-fluid {
max-width: 1100px; /* sets the max-width for the interior wrapper of your section */
/* these two lines will align your content to the left. the auto value for margin tells the element to automatically set a margin until you get to the content. */
margin-left: 0;
margin-right: auto;
}
Now when you add your section, it will have those values automatically applied. I’ll note that content-editors will not be able to enlarge the max-width, only reduce it and cannot change the horizontal alignment, though horizontal alignment is not an option anyway so just create separate sections for alignment options.