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>

1 Answer 1


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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .