Angular Material Grid-List / Grid-Tile Layout Query

Question

I have a problem whereby the content that I place inside of a <md-grid-tile> tag is being centred and any text placed inside is expanding from the centre out. They are then ignoring the sibling <h2> tag and expanding out over that, and proceeding to expand out over the parent tile

I want elements inside of this tag to start in the top left corner and work downwards from there. Any help would be greatly appreciated.

HTML:`

    <md-grid-tile class="main-tile"
                  md-rowspan="1"
                  md-colspan="1"
                  md-colspan-sm="1">
        <md-grid-tile-header>
            <h3>
                Header
            </h3>
        </md-grid-tile-header>
        <div class="tile-container">
            <p>I am content</p>
            <p>And I am more content</p>
            <p>I am content</p>
            <p>And I am more content</p>
            <p>I am content</p>
            <p>And I am more content</p>
            <p>I am content</p>
            <p>And I am more content</p>
            <p>I am content</p>
            <p>And I am more content</p>
        </div>
    </md-grid-tile>
</md-grid-list>`

Result: