Google Icon's Code Block Messing Up Section

The Google icon's code block on the linked site (PW - "321"     is messing Up Section 4 of this site on the homepage. While the section and alignment looks perfectly fine in editor mode, when the site is published it doesn't show any of the section properly and shoots it down the screen. The icons are placed in using code blocks and the are found on the google icon library. 

Any help with this is greatly appreciated, thank you in advance!

Can you share your website URL?

@Ziggy
Apologies - https://olive-mauve-g696.squarespace.com/

Thanks!

There's something in the way that you have this set up that is causing the problems. Can you share the code that you've used?

@ZiggySure thing - listed below from here and edited https://fonts.google.com/icons

Code injection for header - 

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

CSS For Icons

/////

.material-symbols-outlined {
  font-size: 10rem!important;
  color:#005aaf;
  position: center!important;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

/////

Content in the code block 

<div style="text-align: center;">
<span class="material-symbols-outlined">
workspace_premium
</span>

Below is what is looks like in preview. 

Thank will certainly do it, thanks again for the help, it is much appreciated. @Ziggy

1 minute ago, Patterson said:

Thank will certainly do it, thanks again for the help, it is much appreciated. @Ziggy

Happy to help!