Materialize: Parent column should have zero padding for nested columns

[serkandurusoy]

When I create a layout that contains columns inside another column, the containing column's left and right padding break proper alignment, making the nested columns appear smaller.

One can override this by adding padding: 0; to the parent column, but still, given that this is probably going to be the intent in most use cases, I think this should be default.

I guess we could modify a parent through jquery, or providing negative margins to appropriate elements.

Or is this not worth the trouble?

[yowkah]

my paddings seem to be fine if i try this " the grid way" ( using jade for templating) just imagine div in front of every line and indents as "is inside the element on the row above me" if you are not familiar with jade.

        .container
            .row
                .col.s12(style='background-color:red;') here is some talk for the big containing column. 
                    .row(style='background-color:purple;')
                        .col.s12.m6(style='background-color:yellow;')  and then this is a 6-column block inside the big 12col one. if the screensize is medium or higher
                        .col.s12.m6(style='background-color:brown;')  but both of these will align beneath eachother if my screensize falls beneath the medium viewport size. 

reasoning why i tried this as first attempt comes from the documentation:
Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns

what it does in css is: a row has a negative margin to make up for the padding it's container.
so the row basically negates the padding increase from the column in which it is placed.

I hope this helped you

[serkandurusoy]

oh I see now that the rows are there to negate its parent col padding. thank you very much for that @yowkah .

for future readers of this post, below is what I was trying to achieve (and did thanks to your tip)

<div class="container">
  <div class="row">
    <div class="red col s12">
      <div class="purple row">
        <div class="yellow col s12 m6">
          col 1
        </div>
        <div class="brown col s12 m6">
          <div class="green row">
            <div class="blue col s12 l6">
              col 2.1
            </div>
            <div class="cyan col s12 l6">
              col 2.2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[neopostmodern]

This is still broken when the layout is _not_ contained in a .container block. But I'd argue that nesting rows should still work?

Fiddle: http://jsfiddle.net/43mobcrm/

<div class="row">
    <div class="s6 col" id="green">
        .s6
        <div class="row">
            <div class="s6 col" id="red">
                .s6 > .s6
            </div>
            <div class="s6 col" id="orange">
                .s6 > .s6
            </div>
        </div>
    </div>
    <div class="s6 col" id="blue">
        .s6
        <div class="row">
            <div class="s4 col" id="white">
                .s6 > .s4
            </div>
            <div class="s8 col" id="purple">
                .s6 > .s4
            </div>
        </div>
    </div>
</div>