.grid.justify-center overrides descendant text-aligns

[snsxn]

Hi, I'm really happy with this grid and I'm using it a lot, thank you!

I have an issue maybe because I'm totally dumb...

When using justify-centerin grid, every element inside it can't have different text align options:

<div class="container">
   <div class="grid justify-center">
      <div class="col-6">
         <p style="text-align:center>Hi</p>
      </div>
   </div>
</div>

I'm missing something?

P.D: I'm currently commenting these part of the code to work again with text-aligns:

.justify-center.grid [class^="col-"] {
  text-align: left;
  text-align: start;
  /*-moz-text-align-last: left;
  -moz-text-align-last: start;
  text-align-last: left;
  text-align-last: start;*/
}

[leejordan]

This is a side effect of the css that I use to support older browsers. There are a couple of options here.

1. if you don't need to support older (non-flexbox) browsers, you can build a new version of the css from the sass files with the variable $legacy-support set to false. This will remove all the legacy css.

2. If you do need legacy support for older browsers, then when you set text-align for your cols make sure you also set text-align-last to the same value.

3. If you're just using the css directly without building from sass, then your solution will also work fine :)