The Portfolio carousel does not center . It looks horrible when using only 3 items! how can the items be centered?
<div id="oc-portfolio" class="owl-carousel portfolio-carousel carousel-widget" data-margin="20" data-nav="true" data-pagi="false" data-items-xs="1" data-items-sm="3" data-items-md="2" data-items-lg="3">
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-image">
[
](#)
<div class="portfolio-overlay">
[](/html/hr/images/Person.jpg)
[](#)
</div>
</div>
<div class="portfolio-desc">
<h3>[Holly Canevari](#)</h3>
<span>[Chief of Staff & Vice President, Strategy & Operations](#)</span>
</div>
</div>
</div>
<div class="oc-item" >
<div class="iportfolio">
<div class="portfolio-image">
[
](#)
<div class="portfolio-overlay">
[](/html/hr/images/Person.jpg)
[](#)
</div>
</div>
<div class="portfolio-desc">
<h3>[Rachel Korycan](#)</h3>
<span>[Manager, Global Talent & Human Resources](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-image">
[
](#)
<div class="portfolio-overlay">
[](/html/hr/images/Person.jpg)
[](#)
</div>
</div>
<div class="portfolio-desc">
<h3>[Alexis Akeredolu](#)</h3>
<span>[Manager, Global Benefits & Human Resources](#)</span>
</div>
</div>
</div>
</div>
</div>
<div class="divider divider-center"><i class="icon-cloud"></i></div>
</div>
</div>