Center align a section with html code

Solved
goldensocksclub
Tourist
5 0 1

Im new to coding and started only to develop my website a little further. I spent hours just getting the little done that I have but I'm stuck trying to get the section centered to the page. It looks great on the desktop editor and mobile setting on the editor, however when I go into full screen or load my website on a different tab the section is on the far left of the screen rather than being in the middle. I 'll attach my code to the question if any one could help.

the site is goldensocksclub.com the section before the newsletter

 

<style>
	.parent{
    	margin: 0 auto;
    	max-width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-auto-rows: auto;
		gap: 20px;
		padding-top: 30px;
    }


</style>


	<section class="parent">
		<section class="child">
    		<center><img class="child_img" src="https://cdn.shopify.com/s/files/1/0584/4297/3353/t/3/assets/shipping.png?v=1627207724" style="height: 75px; width: XXpx"></center>
			<section class="context">
				<p>
            		<center><b>FREE SHIPPING</b></center>
				</p>
            	<p>
					<center><font size="-1">Paying for shipping can be a toll nobody wants, Enjoy free shipping on all orders over $35.</font></center>
				</p>
			</section>
		</section>
    
		<section class="child">
    		<center><img class="child_img" src="https://cdn.shopify.com/s/files/1/0584/4297/3353/t/3/assets/giftbox.png?v=1627207690" style="height: 75px; width: XXpx"></center>
			<section class="context">
        		<p>
					<center><b>THE PERFECT GIFT</b></center>
				</p>
            	<p>
            		<center><font size="-1">Classic tye-died socks for anyone in the family, birthday gifts and Christmas presents in fun colors, there’s a style for every occasion.</font></center>
            	</p>
			</section>
		</section>
    
		<section class="child">
    		<center><img class="child_img" src="https://cdn.shopify.com/s/files/1/0584/4297/3353/t/3/assets/camera.png?v=1627206636" style="height: 75px; width: XXpx"></center>
        	<section class="contect">
        		<p>
            		<center><b>SHARE YOUR PICTURES</b></center>
            	</p>
            	<p>
            		<center><font size="-1">Take a picture with your tye-died socks and upload them to you social media, tag  and be featured on our page.</font></center>
            	</p>
			</section>
		</section>
    
    	<section class="child">
    		<center><img class="child_img" src="https://cdn.shopify.com/s/files/1/0584/4297/3353/t/3/assets/user.png?v=1627211610" style="height: 75px; width: XXpx"></center>
        	<section class="contect">
        		<p>
            		<center><b>JOIN THE CLUB</b></center>
            	</p>
            	<p>
            		<center><font size="-1">Sign up with the Golden Socks Club and be updated on new drops and restocks, also receive promo codes and discount right to your inbox.</font></center>
            	</p>
			</section>
		</section>
	</section>

 

0 Likes
Natztech
Shopify Partner
2118 540 1294

This is an accepted solution.

hello @goldensocksclub 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 749px) {
#shopify-section-1627202104be53bc48 .page-width .parent{
   display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}
#shopify-section-1627202104be53bc48 .page-width .parent .child{
	flex: 0 0 20%;
}
}

 

goldensocksclub
Tourist
5 0 1

thank you it worked

0 Likes
goldensocksclub
Tourist
5 0 1

thank you it worked

 

0 Likes