Code in code block is affecting Fluid Engine Grid

I have inserted a code block that includes a display:flex property  - for some reason this is causing the fluid engine grid to go crazy and every time I save the progress - my code block location is completely shifted.  Do you know why this would be the case?  Is there a way to stop the code from affecting the rest of the website?

this is the code   and the effect of the code on the text is below

<style type="text/css">

.wordtwo{

display: flex;

font-size: 40px;

font-family: "Bebas Neue";

font-weight: bold;

text-decoration: none;

color: white;

opacity:0.8;

padding-top: 30px;

padding-bottom: 0px;

margin: 8%;

}



.t-anim{

  transform: translateY(-20%);

  width: 100%

}



.o -anim{

  transform: translateY(-30%);

  width: 100%

}



.l-anim{

  transform: translateY(-60%);

  width: 100%

}



.s-anim{

  transform: translateY(-40%);

  width: 100%

}





.wordtwo:hover .t-anim, .wordtwo:hover .l-anim, .wordtwo:hover .s-anim{

  transform: translateY(0%);

  transition: 1s all;

}



.wordtwo:hover .o-anim{

  transform: translateY(0%);

  font-size: 40px;

  transition: 1s all;

}





.wordtwo:not(:hover) .o-anim{

  transform: translateY(-30%);

  font-size: 30px;

  transition: 1s all;

}



.wordtwo:not(:hover)  .t-anim{

  transform: translateY(-20%);

  transition: 1s all;

}



.wordtwo:not(:hover)  .l-anim{

  transform: translateY(-60%);

  transition: 1s all;

}



.wordtwo:not(:hover) .s-anim{

  transform: translateY(-40%);

  transition: 1s all;

}



</style>

</body>





<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>



  <div class="anim-wrapper">

    <div class="t-anim">T</div>

  </div>

  <div>O</div>

<div class="anim-wrapper">

    <div class="o-anim">O</div>

  </div>

<div class="anim-wrapper">

    <div class="l-anim">L</div>

  </div>

  <div class="anim-wrapper">

    <div class="s-anim">S</div>

  </div>

You'll need to remove this from your code, it has no opening: 

</body>

4 hours ago, Ziggy said:

You'll need to remove this from your code, it has no opening: 

</body>

Yeah I added that here by accident.  I removed that from the original code.  Anyway it doesn't help the issue.   See attached

Also see how the entire grid has shifted when I got back into Editing

I'm not really sure what's causing that. Can you share the page this is on so I can directly look at it?

4 hours ago, Ziggy said:

I'm not really sure what's causing that. Can you share the page this is on so I can directly look at it?

https://blueberry-carrot-xawg.squarespace.com/

pw: codeblock

Sorry, looking externally I can't see why your editing experience isn't working correctly, all looks fine to me.

Just now, Ziggy said:

Sorry, looking externally I can't see why your editing experience isn't working correctly, all looks fine to me.

Are the words not out of place for you?

The CT of contact is certainly out of place, if that's what you are referring to. I would guess you have a closing DIV </div> after the A.

58 minutes ago, Ziggy said:

The CT of contact is certainly out of place, if that's what you are referring to. I would guess you have a closing DIV </div> after the A.

I have a closing </div> after each letter

1 hour ago, Ziggy said:

The CT of contact is certainly out of place, if that's what you are referring to. I would guess you have a closing DIV </div> after the A.

One of the DIVs was not closed >  so that fixed why the word was separated but I cant under stand why the grid is getting so messed up and out of place.  If you see the video - the grid is totally misaligned.  

Is there a code that can tell the grid to stay in place or to ignore the code blocks?

2 minutes ago, joshuaechevarriadop said:

One of the DIVs was not closed >

That's good to be fixed.

<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

36 minutes ago, Ziggy said:

That's good to be fixed.

<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

I had the html at the bottom - when I moved it up top - it seems like it solved everything

40 minutes ago, Ziggy said:

That's good to be fixed.

<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

Nevermind - as soon as I saved it - everything went completely off

Okay, I could test it on one of my websites, and see if I can replicate the issue and fix it. Can you share the entire code?

Actually given that you have two blocks like this, have you tried temporarily removing one or the other?

Just now, Ziggy said:

Okay, I could test it on one of my websites, and see if I can replicate the issue and fix it. Can you share the entire code?

Actually given that you have two blocks like this, have you tried temporarily removing one or the other?

I noticed that the blocks are interacting with each other as well

5 minutes ago, Ziggy said:

Okay, I could test it on one of my websites, and see if I can replicate the issue and fix it. Can you share the entire code?

Actually given that you have two blocks like this, have you tried temporarily removing one or the other?

I just messaged you.  Thank you!