I'm trying to use a communities theme lightning component that I just built on trailhead on a record detail page.  However when I try to display the record detail it is smashed/smushed/pushed/forced to the left of the screen.  Will you help me add this to the lightning component so that fields will take up as much space availble?  Thank you in advance!


https://trailhead.salesforce.com/content/learn/projects/communities_theme_layout

Component

<aura:component implements="forceCommunity:themeLayout" >
    <aura:attribute name="search" type="Aura.Component[]"/>
    <aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
    <div class="slds-grid slds-grid--align-center">
        <div class="slds-col" >
            <div class="slds-border_right">
                <div class="slds-grid slds-grid--vertical">
                    <div class="slds-col">
                        <div class="logoContainer"></div>
                    </div>
                    <div class="slds-col" >
                        <c:verticalNav></c:verticalNav>
                    </div>
                    <div class="slds-col">
                        {!v.sidebarFooter}
                    </div>
                </div>
            </div>
        </div>
        <div style="width:2%;">
        </div>
        <div class="slds-col content" style="width:80%;">
            {!v.body}
        </div>
    </div>
</aura:component>

Style

.THIS .logoContainer {
background-image: t('url(' + brandLogoImage  + ')');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 99;
cursor: pointer;
position: relative;
max-width: 10000px;
max-height: 52px;
display: block;
outline: 0;
height: 50px;
margin-top: 10px;
}
.THIS .slds-col content{
    width: 100%;
}