Custom CSS styling under HTML Tags is unresponsive but responsive under BODY tag?

Design help Custom code
1

Hey guys! I’m trying to implement a custom responsive css into my website background. I’ve tested the code offsite on my personal code editor and it works, but when I attach the entirety css styling to html tag in Webflow only the ‘box-shadow’, ‘padding’ renders. In Webflow a fraction of my styling doesn’t work under the html tag (but some does?) and ALSO some doesn’t work under the body tag but does under the HTML tag. Below is my working code:

 <style>        
html{
  min-height: 100vh;
  background:
    linear-gradient(#f0f0de 0 0) calc(1*100%/8),
    linear-gradient(#f0f0de 0 0) calc(2*100%/8),
    linear-gradient(#f0f0de 0 0) calc(3*100%/8),
    linear-gradient(#f0f0de 0 0) calc(4*100%/8),
    linear-gradient(#f0f0de 0 0) calc(5*100%/8),
    linear-gradient(#f0f0de 0 0) calc(6*100%/8),
    linear-gradient(#f0f0de 0 0) calc(7*100%/8);
    background-size: 1rem 100%; 
    background-repeat: no-repeat;
    padding-left: 2.5rem;
    padding-right: 2.5rem; 
    box-shadow: inset 2.5rem 0px #f0f0de, inset -2.5rem 0px #f0f0de;
    background-origin: content-box;
    background-color: rgba(237, 238, 222, 100%);
  }
  
@media (max-width: 899px){
    html{
background-color: rgba(237, 238, 222, 100%);
        background-image: none;
    box-shadow:none;
    }
}
    </style>

The background linear-gradient specifically doesn’t “take” to html tag but will to the body tag, and to make the gradient linear respond to the page padding I had to set up an HTML tag just with the padding and the box-shadow property. (See Webflow layout below).

<style>
html{ 
  padding-left: 2.5rem;
  padding-right: 2.5rem; 
  box-shadow: inset 2.5rem 0px #f0f0de, inset -2.5rem 0px #f0f0de;
}
  
body{
  background:
    linear-gradient(#f0f0de 0 0) calc(1*100%/8),
    linear-gradient(#f0f0de 0 0) calc(2*100%/8),
    linear-gradient(#f0f0de 0 0) calc(3*100%/8),
    linear-gradient(#f0f0de 0 0) calc(4*100%/8),
    linear-gradient(#f0f0de 0 0) calc(5*100%/8),
    linear-gradient(#f0f0de 0 0) calc(6*100%/8),
    linear-gradient(#f0f0de 0 0) calc(7*100%/8);
    background-size: 1rem 100%; 
    background-repeat: no-repeat;
    background-origin: content-box;
    background-color: blue;  
  }
  
@media (max-width: 899px){
  body{
	background-color: rgba(237, 238, 222, 100%);
    background-image: none;
    box-shadow:none;
    }
}
    </style>

I’ve tried the code it in different embeds, it’s currently working under the before the in the custom code option. Can someone explain why this is happening? Thank you.

Here is my site Read-Only:

(Webflow - sharosite)]