Hello, I have followed this trailhead exactly as they have asked and I am unable to render the SLDS view. The output is in standard HTML. I have seen other forums that have faced similar problems and I have copied their exact code over with no avail. I am 99.9% sure the code is correct, but perhaps the static resource is not uploading correctly? I can not figure out what is going wrong. 

I have seen some people use this tag:<ltng:require styles="/resource/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>
And the trailhead suggests using this tag: <ltng:require styles="{!$Resource.SLDS12345 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>

If not the static resource, then perhaps it is this tag?

Any help would be greatly appreciated. 

My App:
     <aura:application>
        <ltng:require styles="/resource/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>
        <div class="slds">    
            <c:camping/>
        </div>
</aura:application>

My camping.cmp: *please note I have also attempted to just do the expenses example on the trailhead but with no success 

<aura:component >
 <aura:component >   
    div style="slds">
        <c:campingHeader />
        <c:campingList /> 
    </div>
</aura:component >

My header:
<aura:component >
        <div class="slds-col slds-col--padded slds-p-top--large">
            <div style="slds">
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col">
                    <h1 class="slds-text-heading--medium">Camping List</h1>
                </div>
            </div>
        </div>
    </div>
    </div>
</aura:component>

I won't past the other content for the header isn't even working.