Attempting to create a lightning component which will be wrapped by a div which is all white but it is not making up 100% of the width/height.

enter image description here

<aura:component implements="force:appHostable">      
    <div style="height:100%;width:100%;" class="slds-grid slds-box slds-theme_default">     
        <div style="background-color:#2C4E33;" class="slds-col slds-m-horizontal_medium slds-theme_default" >
            <span> 1</span>
        <div style="background-color:#E3CAA0;" class="slds-col slds-m-horizontal_medium">
            <span> 2</span>
        <div style="background-color:#2C4E33;" class="slds-col slds-m-horizontal_medium">
            <span> 3</span>
        <div style="background-color:#E3CAA0;" class="slds-col slds-m-horizontal_medium">
            <span> 4</span>

slds-box says:

Provides 1rem base padding and borders

You're getting some padding because you're using slds-box. Remove that, and you should have the full width available. As an aside, it is not necessary to specify width on a div, because it uses 100% by default.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.