purecss.io - Why are two pure-u-1-2 elements stacking on a wide screen?

Question

Banging my head against this all morning (trying almost every possible combination), I still cannot figure this out.

Why are the two pure-u-1-2 elements stacking over one another? Tested on Chrome on a desktop (verified using other browsers) and the pure-u-5-6 element they are part of has a width of 1000px?

<div class="pure-g-r">
  <div class="pure-u-1-12"></div>
  <div class="pure-u-5-6">
    <div>
      <div class="pure-g">
        <h1>Photo Albums</h1>
        <div class="pure-u-1-2">
          <img src="/redacted-url">
        </div>
        <div class="pure-u-1-2">
          <p>Why is this text below the image?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-1-12"></div>
</div>

Also note, when I do Ctrl+Shift+C to go into the debug mode, I can confirm that the two pure-u-1-2 elements are set to the appropriate width.

Answer 1

Have a look at this on jsfiddle. Code:

<div class="pure-g-r">
  <div class="pure-u-1-12"></div>
  <div class="pure-u-5-6">
    <div>
        <h1 style="text-align: center">photo albums</h1>
        <div class="pure-g">
        <div class="pure-u-1-2">
          <img src="/redacted-url">
        </div>
        <div class="pure-u-1-2">
          <p>Why is this text below the image?</p>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-1-12"></div>
</div>

You have to put your pure-g class right after h1, otherwise the next pure-u element will be position right after this tag(like if you had float left on both h1 tag and div tag with class pure-u-1-2).