How to adjust HTML code for consistent section width on homepage?

[Alien84]

Hi all, 

I added custom HTML code; everything works well except the width of the section. It doesn't follow the homepage's layout. What to add to the code, to make the width of the section follow the rest of the homepage. Please find the code (can't add the code), here's the link to the code: https://speed-ecom.com/how-to-create-a-footer-with-trust-badges-on-your-shopify-store/ and the photo below. 

Thank you in advance for your help.

<!-- Beginning of the code - Pre footer trust badges --> <style> #gd-pre-footer { overflow:hidden; clear:both; margin-top:35px; margin-bottom:10px; padding-bottom:0; } #gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; } #gd-pre-footer ul { padding-left:0 !important; } #gd-pre-footer center { background:#FFFFFF; } @media screen and (min-width: 768px) { #gd-pre-footer .col-item { width:25%; text-align:center; float:left; padding:5px 15px; } } </style> <div id="gd-pre-footer" class="pre_footer index-section home-section"> <div class="wrapper"> <div> <ul class="footer-badges-list"> <li class="col-item"> <div class="text-center"> <img src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/shipping.png?v=1612535028" style="height: 75px;"> <h3 class="h4">Free Shipping</h3> </div> <p></p><center>You love free shipping, we love free shipping, everyone loves it!</center><p></p> </li> <li class="col-item"> <div class="text-center"> <img class="" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/satisfaction-guaranteed.png?v=1612535028" style="height: 75px;"> <h3 class="h4">Satisfaction Guaranteed</h3> </div> <p></p><center>Is something wrong? You have 14 days to change your mind.</center><p></p> </li> <li class="col-item"> <div class="text-center"> <img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/client-support.png?v=1612535028" style="height: 75px;"> <h3 class="h4">24/7 Client Support</h3> </div> <p></p><center>Need help? Our team will gladly help you anytime!</center><p></p> </li> <li class="col-item"> <div class="text-center"> <img class="img90" src="https://cdn.shopify.com/s/files/1/0533/3834/1574/files/secure-payments.png?v=1612535028" style="height: 75px;"> <h3 class="h4">Secure Payments</h3> </div> <p></p><center>We use SSL encryption to ensure a secure shopping experience.</center><p></p> </li> </ul> </div> </div> </div> <!-- Ending of the code - Pre footer trust badges -->

[AvadaCommerce]

Hi @Alien84 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[MS_WEB_DESIGNER]

Hi @Alien84,

I am Ani From https://www.task4store.com/  - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store Url,
-Also Mention Which Shopify theme you are using 

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Ani

[DelightCart]

@Alien84 Please send me store url.