Cannot get div to center - html

Question

I have tried everything to get a div of dynamic width (highlightsContainer) to center within its parent. I think it has something to do with the fact that this div takes up 100% of the parent container width, no matter what I do.
I have tried to set it to inline-block, but that does not fix it. Dev Tools still shows it as taking up 100% of the parent container width. The children of .highlightsContainer are not forcing it to this width.
Here is my markup:
<div class="highlightsContainerWrapper">
<div class="highlightsContainer">
<a href="#video">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-1.png" />
<div class="highlightLabel">Mobile Site</div>
</div>
</a>
<a href="#email">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-2.png" />
<div class="highlightLabel">Video Gallery</div>
</div>
</a>
<a href="#social">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-3.png" />
<div class="highlightLabel">jQuery Modals</div>
</div>
</a>
<a href="#blog">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-4.png" />
<div class="highlightLabel">SEO</div>
</div>
</a>
</div>
</div>
And my CSS:
.highlightsContainerWrapper {
float: left;
}
.highlightsContainer {
display: inline-block;
margin: 0 auto;
}
.highlightEntry {
width: 18%;
margin: 3% 1%;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #fcfbe7;
}

Answer 1

You can do something like this:
.highlightsContainerWrapper {
float: left;
width: 100%;
text-align: center;
}
Works for dynamically generated content. You won't have to set a width on .highlightsContainer
Working jsFiddle demo

Answer 2

To add to the previous comment, this could also work as well without having to have the width be 100 percent each time if you don't want it to be.
.highlightsContainerWrapper {
float: left;
text-align:center;
}
Then you can make the width whatever you want it to be.
Hoped that helped you center the div