Why isn't my 2-column Pure CSS layout working?

Question

I'm trying to create a simple Meteor Web application, but am struggling already to produce a working 2 column layout defined via a Pure responsive grid. The problem is demonstrated in the below screenshot; the heading should be two columns on one line, not two (lines) and "Sidebar Content" should be in the column to the left of "Ace Editor Demo":

You may also visit the live version of my application to see the problem for yourself. Additionally, I've published the project on github.

It'd make me very happy if someone could point out why my intended 2 column layout isn't working as intended. I've tested with Chromium 28.0.1500.71 and Firefox 23.0.

Code

Styling

This is the application's style sheet (written in Stylus):

menu-background = #272F32
menu-color = #DAEAEF
padding-horizontal = 3em
padding-vertical = 1em
padding-top = 35px

.content
    border-radius: 10px
    margin-top 39px
    background-color white

    padding-left 0px
    padding-right 0px
    // padding-top padding-vertical
    padding-bottom padding-vertical

    .content-ribbon
        background-color white
        //padding-left padding-horizontal
        //padding-right padding-horizontal

    #sidebar
        padding-left: 20px
        padding-top: padding-top

    #editor-container
        padding-top: padding-top
        border-left: 1px solid
        padding-left: padding-horizontal
        height: 600px

        & > h1
            margin-top: 0

        .ace_editor
          width: 700px
          height: 500px

#menu
    background-color menu-background
    .pure-menu-heading
        //padding-left: 40px
        //padding-right: 7px
        // width: 170px
        color white

    li
        a
            color menu-color
            &:hover
                background-color rgb(51, 51, 51)

        &.pure-menu-selected
            a
                -webkit-box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
                -moz-box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
                box-shadow inset 0 3px 8px rgba(0, 0, 0, 0.125)
                background-color: #111111
                color rgb(220, 220, 220)

footer
    //margin-top 5em
    margin-top 0px
    border-top 1px solid menu-background
    padding 1em
    color black
    text-align center
    font-size 80%

HTML

The application's HTML, an Angular template (angular.html) and a partial (partials/home.html); you may notice the root div defines a Pure responsive grid (class pure-g-r), the columns are defined through classes pure-u-1-5 (left column) and pure-u-4-5 (right column):

angular.html

<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
    <header class="pure-u-1">
        <nav id="menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
            <div class="pure-u-1-5">
                <div class="pure-menu-heading">Meteor-Ace</div>
            </div>

            <ul class="pure-u-4-5">
                <li data-ng-repeat="menuItem in menuItems">
                    <a href="{{menuItem.address}}">{{menuItem.name}}</a>
                </li>
            </ul>
        </nav>
    </header>

    <article id="content" class="pure-u-1">
        <div class="pure-g-r content-ribbon">
            <div class="pure-u-1">
                <div data-ng-view></div>
            </div>
        </div>
        <footer class="pure-u-1">
            Made with the excellent <a href="http://meteor.com/">Meteor</a> framework and
            <a href="http://meteor.com/">AngularJS</a>. © 2013 Arve Knudsen
        </footer>
    </article>
</div>

partials/home.html

<div class="pure-u-1-5">
    <div id="sidebar">Sidebar Content</div>
</div>

<div class="pure-u-4-5">
    <div id="editor-container">
        <h1><a href="http://ace.c9.io/">Ace</a> Editor Demo</h1>

        <!--<div data-ui-ace></div>-->
    </div>
</div>

Answer 1

As it turns out, the problem was that I nested grid columns within columns (oops). The following HTML is rectified and doesn't exhibit any layout problems:

angular.html

<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
    <header>
        <nav id="menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
            <div class="pure-u-1-5">
                <div class="pure-menu-heading">Meteor-Ace</div>
            </div>

            <ul class="pure-u-4-5">
                <li data-ng-repeat="menuItem in menuItems">
                    <a href="{{menuItem.address}}">{{menuItem.name}}</a>
                </li>
            </ul>
        </nav>
    </header>

    <article id="content">
        <div class="content-ribbon">
                <div data-ng-view></div>
        </div>
        <footer class="pure-u-1">
            Made with the excellent <a href="http://meteor.com/">Meteor</a> framework and
            <a href="http://meteor.com/">AngularJS</a>. © 2013 Arve Knudsen
        </footer>
    </article>
</div>

partials/home.html

<div class="pure-u-1-5">
    <div id="sidebar">Sidebar Content</div>
</div>

<div class="pure-u-4-5">
    <div id="editor-container">
        <h1><a href="http://ace.c9.io/">Ace</a> Editor Demo</h1>

        <div data-ui-ace></div>
    </div>
</div>

Answer 2

The two columns are divs so they need to be floating.

Try adding float: left; like so:

.pure-g-r [class *= "pure-u"] {
  font-family: sans-serif;
  float: left;
}

This is what I get when I add the float: