html - Understanding Pull Classes - Centering Items -

so following code included in on line shop.

i think designed pull items left says below , change depending on amount of items.

i have 1 item , center.

what best way without ruining responsive code , understand method?

/*============================================================================   pull     - pull classes, move grid items left amounts ==============================================================================*/ @mixin pull-setup($namespace: "") {   /* whole */   #{$class-type}pull--#{$namespace}one-whole       { right:100%; @include silent-relative(); }    /* halves */   #{$class-type}pull--#{$namespace}one-half        { right:50%; @include silent-relative(); }    /* thirds */   #{$class-type}pull--#{$namespace}one-third       { right:33.333%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-thirds      { right:66.666%; @include silent-relative(); }    /* quarters */   #{$class-type}pull--#{$namespace}one-quarter     { right:25%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-quarters    { @extend #{$class-type}pull--#{$namespace}one-half; }   #{$class-type}pull--#{$namespace}three-quarters  { right:75%; @include silent-relative(); }    /* fifths */   #{$class-type}pull--#{$namespace}one-fifth       { right:20%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-fifths      { right:40%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}three-fifths    { right:60%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}four-fifths     { right:80%; @include silent-relative(); }    /* sixths */   #{$class-type}pull--#{$namespace}one-sixth       { right:16.666%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-sixths      { @extend #{$class-type}pull--#{$namespace}one-third; }   #{$class-type}pull--#{$namespace}three-sixths    { @extend #{$class-type}pull--#{$namespace}one-half; }   #{$class-type}pull--#{$namespace}four-sixths     { @extend #{$class-type}pull--#{$namespace}two-thirds; }   #{$class-type}pull--#{$namespace}five-sixths     { right:83.333%; @include silent-relative(); }    /* eighths */   #{$class-type}pull--#{$namespace}one-eighth      { right:12.5%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-eighths     { @extend #{$class-type}pull--#{$namespace}one-quarter; }   #{$class-type}pull--#{$namespace}three-eighths   { right:37.5%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}four-eighths    { @extend #{$class-type}pull--#{$namespace}one-half; }   #{$class-type}pull--#{$namespace}five-eighths    { right:62.5%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}six-eighths     { @extend #{$class-type}pull--#{$namespace}three-quarters; }   #{$class-type}pull--#{$namespace}seven-eighths   { right:87.5%; @include silent-relative(); }    /* tenths */   #{$class-type}pull--#{$namespace}one-tenth       { right:10%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-tenths      { @extend #{$class-type}pull--#{$namespace}one-fifth; }   #{$class-type}pull--#{$namespace}three-tenths    { right:30%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}four-tenths     { @extend #{$class-type}pull--#{$namespace}two-fifths; }   #{$class-type}pull--#{$namespace}five-tenths     { @extend #{$class-type}pull--#{$namespace}one-half; }   #{$class-type}pull--#{$namespace}six-tenths      { @extend #{$class-type}pull--#{$namespace}three-fifths; }   #{$class-type}pull--#{$namespace}seven-tenths    { right:70%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}eight-tenths    { @extend #{$class-type}pull--#{$namespace}four-fifths; }   #{$class-type}pull--#{$namespace}nine-tenths     { right:90%; @include silent-relative(); }    /* twelfths */   #{$class-type}pull--#{$namespace}one-twelfth     { right:8.333%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}two-twelfths    { @extend #{$class-type}pull--#{$namespace}one-sixth; }   #{$class-type}pull--#{$namespace}three-twelfths  { @extend #{$class-type}pull--#{$namespace}one-quarter; }   #{$class-type}pull--#{$namespace}four-twelfths   { @extend #{$class-type}pull--#{$namespace}one-third; }   #{$class-type}pull--#{$namespace}five-twelfths   { right:41.666%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}six-twelfths    { @extend #{$class-type}pull--#{$namespace}one-half; }   #{$class-type}pull--#{$namespace}seven-twelfths  { right:58.333%; @include silent-relative(); }   #{$class-type}pull--#{$namespace}eight-twelfths  { @extend #{$class-type}pull--#{$namespace}two-thirds; }   #{$class-type}pull--#{$namespace}nine-twelfths   { @extend #{$class-type}pull--#{$namespace}three-quarters; }   #{$class-type}pull--#{$namespace}ten-twelfths    { @extend #{$class-type}pull--#{$namespace}five-sixths; }   #{$class-type}pull--#{$namespace}eleven-twelfths { right:91.666%; @include silent-relative(); } } 

any appreciated, have attempted center tags , changing percentages though not working , changes size too.

thank you.

added html:

<div class="grid-uniform product-grid">  <div class="grid-item medium--one-third large--one-third">    <a href="/products/50g-alba-cinnamon" class="product-grid-item text-center">     <div class="product-grid-image" style="height: 181px;">       <div class="product-grid-image--centered">           <img src="//cdn.shopify.com/s/files/1/0834/6311/products/image002_large.jpg?v=1429679422" alt="50g of pure alba cinnamon">       </div>     </div>         <p>            <span class="h6 color-secondary">50g of pure alba cinnamon</span><br>  $16           </p>   </a> </div> </div> 

it's been said already, that's not css. shouldn't touch file unless know you're doing.

anyway, working example should provide html.

if need move 1 element, can add inline styles directly html keep simple.

<div class="..." style="insert here css styles"> </div>