need help adjusting my collections picture and text to the center of the page

[darthwiz]

this is my issue, i changed the red text so that the shopify store wouldnt push the picture to the whole screen, so now its sits on the left side but not centered.   I saw a post that did center it, but then made it big again to fit the whole screen.  im looking to keep the picture about half the screen size but still have it centered in the middle of the page with its text, while just in the %- when 1 -% setup. please if anyone can help, i cant seem to figure this out for the life of me.  

<div class="grid grid--uniform collection-grid">
{%- for block in section.blocks limit: section.blocks.size -%}
{%- case section.blocks.size -%}
{%- when 1 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 2 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{%- when 4 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{%- when 5 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{%- when 6 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{%- else -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{%- endcase -%}

[LitExtension]

Hi @darthwiz,

Please send your site and if your site is password protected, please send me the password. I will check it.