Trying to override Description Horizontal List

Question

I'm using the Description Horizontal List from SLDS. My code so far :

<dl class="slds-dl--horizontal">
    <dt class="slds-dl--horizontal__label"><b>Hello1</b></dt>
    <dt class="slds-dl--horizontal__label"><b>Hello2</b></dt>
    <dt class="slds-dl--horizontal__label"><b>Hello3</b></dt>
    <dt class="slds-dl--horizontal__label"><b>Hello4</b></dt>
</dl>

Looking at my UI I see the first three are inlined but the last one is falling down to the next line. The reason behind this is because the width being used in slds-dl--horizontal__label is at 30%. I've been trying to override the width percentage but it is not being reflected. Any idea what might be wrong?

This is my CSS:

.THIS.slds-dl--horizontal__label {
   width:10%;
}

Answer 1

You need to have your CSS declared as below (notice the space between .THIS and .slds-dl--horizontal__label

.THIS .slds-dl--horizontal__label {
   width:10%;
}

From documentation: Note that this is a descendant selector and it contains a space