Installing CSS on a single page

I can either add it ot the page header (prfered but only avialable on business plans!) aand I need to wrap it in the <style> tag, otherwise it will not be understood that it is code.

https://insidethesquare.co/squarespace-tutorials/single-page

  
    /*Here I added CSS code inside a code block set to HMTL by adding the style tag around it and it works! It affects the other code block below.*/

div.slide-right {
  width:100%;
  overflow:hidden;
}
div.slide-right p {
  animation: 10s slide-right;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

  

  
    
Here I added CSS code inside a code block set to HMTL by adding the style tag around it and it works! It affects the other code block below.
<style>
div.slide-right {
  width:100%;
  overflow:hidden;
}
div.slide-right p {
  animation: 10s slide-right;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>
  

Everything is funny, as long as it's happening to somebody else.