Why is my ng-repeated div not displaying as an inline-block?

Question

I am trying to ng-repeat through an array of skills and have them display as inline-blocks, but for some reason there are line breaks between each skill.

<div class="skillsWrapper" style="display: inline-block" ng-repeat="skill in hero.equipment.skills track by $index">
        <span class="profileSkill">{{skill}}<span ng-if="!$last">,</span></span>
    </div>

and here is the CSS:

.skillsWrapper
    display: inline-block; 
    text-align: center;


.profileSkill
    display: inline-block;

I would like the skills to display like throwing, climbing, fighting but they show up with line-breaks like

throwing,
climbing,
fighting

How can I fix this, and why isn't it working as is?