slds grid column alignment problems!

Question

For some time i have been trying to left align the center column, but still keep it at the center. ON the image below you can see the icons with the counts for each service, but not aligned to the left on each row. How do I make that happen? Pasting the code and image below. Please advise!

 <div>
    <aura:iteration items="{! v.mduInfo }" var="mdu">
        <div class="slds-text-heading_x-small">{! mdu.address.Name+', '+mdu.address.sumchans__city__c+'
            '+mdu.address.sumchans__provinceCode__c+' '+mdu.address.sumchans__postalCode__c }</div>
        <div class="slds-grid slds-gutters">
            <div class="slds-col">
                <ul class="slds-list_horizontal">
                    <li class="slds-p-around_x-small">Total Units:<strong>{! ' '+mdu.totalUnits }</strong></li>
                    <li class="slds-p-around_x-small">N/N:<strong>{! ' '+mdu.nnUnits }</strong></li>
                    <li class="slds-p-around_x-small">C/C:<strong>{! ' '+mdu.ccUnits }</strong></li>
                    <li class="slds-p-around_x-small">A/A:<strong>{! ' '+mdu.aaUnits }</strong></li>
                </ul>
            </div>
            <div class="slds-col">
                <ul class="slds-list_horizontal">
                    <li class="slds-p-around_x-small">
                        <lightning:icon iconName="utility:desktop" alternativeText="Television" size="x-small" /><strong>{!
                            ' '+mdu.videoOffering }</strong></li>
                    <li class="slds-p-around_x-small ">
                        <lightning:icon iconName="utility:wifi" alternativeText="Internet" size="x-small" /><strong>{!
                            ' '+mdu.internetOffering }</strong></li>
                    <li class="slds-p-around_x-small ">
                        <lightning:icon iconName="utility:call" alternativeText="Phone" size="x-small" /><strong>{!
                            ' '+mdu.phoneOffering }</strong></li>
                </ul>
            </div>
            <div class="slds-col">
                <ul class="slds-float_right">
                    <div>
                        <ul>
                            <li class="slds-align_absolute-center slds-p-around_x-small">Penetration</li>
                            <li class="slds-align_absolute-center slds-p-around_x-small">
                                <h2>
                                    <lightning:formattedNumber value="{! (mdu.aaUnits/mdu.totalUnits) }" style="percent" />
                                </h2>
                            </li>
                        </ul>
                    </div>
                </ul>
            </div>
        </div>
    </aura:iteration>
</div>

Answer 1

Technically they are aligned to the left, the problem is that the column widths aren't the same in the rows since you haven't defined what they should be. By adding slds-size_1-of-3 to each slds-colyou would set them all to be 33% of the allowed width.

Applying this to the code above would result in:

<div>
<aura:iteration items="{! v.mduInfo }" var="mdu">
    <div class="slds-text-heading_x-small">{! mdu.address.Name+', '+mdu.address.sumchans__city__c+'
        '+mdu.address.sumchans__provinceCode__c+' '+mdu.address.sumchans__postalCode__c }</div>
    <div class="slds-grid slds-gutters">
        <div class="slds-col slds-size_1-of-3">
            <ul class="slds-list_horizontal">
                <li class="slds-p-around_x-small">Total Units:<strong>{! ' '+mdu.totalUnits }</strong></li>
                <li class="slds-p-around_x-small">N/N:<strong>{! ' '+mdu.nnUnits }</strong></li>
                <li class="slds-p-around_x-small">C/C:<strong>{! ' '+mdu.ccUnits }</strong></li>
                <li class="slds-p-around_x-small">A/A:<strong>{! ' '+mdu.aaUnits }</strong></li>
            </ul>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <ul class="slds-list_horizontal">
                <li class="slds-p-around_x-small">
                    <lightning:icon iconName="utility:desktop" alternativeText="Television" size="x-small" /><strong>{!
                        ' '+mdu.videoOffering }</strong></li>
                <li class="slds-p-around_x-small ">
                    <lightning:icon iconName="utility:wifi" alternativeText="Internet" size="x-small" /><strong>{!
                        ' '+mdu.internetOffering }</strong></li>
                <li class="slds-p-around_x-small ">
                    <lightning:icon iconName="utility:call" alternativeText="Phone" size="x-small" /><strong>{!
                        ' '+mdu.phoneOffering }</strong></li>
            </ul>
        </div>
        <div class="slds-col slds-size_1-of-3">
            <ul class="slds-float_right">
                <div>
                    <ul>
                        <li class="slds-align_absolute-center slds-p-around_x-small">Penetration</li>
                        <li class="slds-align_absolute-center slds-p-around_x-small">
                            <h2>
                                <lightning:formattedNumber value="{! (mdu.aaUnits/mdu.totalUnits) }" style="percent" />
                            </h2>
                        </li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>
</aura:iteration>
</div>

You should also check out and which takes care of the CSS classes for grids and it makes sure it is up-to-date with any changes to SLDS: https://developer.salesforce.com/docs/component-library/bundle/lightning:layout/example