Hello there,

I'm currently having a styling issue at the the step 3 of the Trailhead Lightning Component Framework Specialist,

here is what it's currently looks like :



and what it is supposed to look :



This is the BoatTile component code :
 

<aura:component >

    <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="Boolean" default="false" />
    
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <aura:registerEvent name="BoatSelected" type="c:BoatSelected"/>

        <lightning:button class="{! v.selected == true ? 'tile selected' : 'tile' }" onclick="{!c.onBoatClick}">
            <div style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
                <div class="lower-third">
                    <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
                </div>
            </div>
        </lightning:button>

</aura:component>

and the associated style :
 

.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}

.THIS.innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.THIS.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

.THIS.selected {
    border: 3px solid rgb(0, 112, 210);
}

Any help would be great, I am a bit confused not to have this displayed correctly.

Thanks lot !