Susy not floating correctly?

Question

I'm currently using susy to create my personal site, and I'm doing a quick prototype at the moment (www.dev.jaylaiche.com). I'm trying to use the span mixin to align my content (the lorem ipsum at the bottom of the page and the text to the right of it) by using the following CSS:

.home-page {
@include container(100%);
height: 100%;
min-height: 1020px;
nav {
    ul {
        @include horizontal-list();
        li {
            @include box-sizing(border-box);
            width: 20%;
            padding: 2%;
            text-align: center;
        }
    }
}
.about-me {
    width: inherit;
    height: auto;
    .about-text {
        @include span(5);
    }
    .about-pic {
        @include span(3 at 9 of 12);
    }
  }
}

So, this SHOULD float the .about-pic div to the right, correct? I want it to go from column 9 to column 12 position. However, when I enter the code, it just continues to float everything to the left. I used this previously the other day on another project and it seemed to work fine. What am I doing wrong here?

If needed, the markup looks like this:

<div class="home-page">

<nav>
    <ul>
        <li class="navi home-nav"><a href="#">HOME</a></li>
        <li class="navi work-nav"><a href="#">WORK</a></li>
        <li class="navi logo-nav"><a href="#">Placeholder</a></li>
        <li class="navi blog-nav"><a href="#">BLOG</a></li>
        <li class="navi cont-nav"><a href="#">CONTACT</a></li>
    </ul>
</nav>

<div class="about-me">
    <div class="about-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iure quasi veritatis? Natus pariatur molestias modi laborum sed numquam, architecto nemo. Nobis id itaque nostrum, aliquam repellendus qui voluptatem? Soluta.
    </div>
    <div class="about-pic">Pic goes here</div>
</div>

Answer 1

3 at 9 would cover columns 9, 10, and 11 — but if you aren't using isolation, it will float left. Easiest just to use last in this case: span(last 3).