body {
      text-align: center;
      background-color: #90EE90; /* цвет фона страницы Светло-зеленый */
      }

p {
        text-align: center;
        color: #0c0c0f;
        background-color: aqua;
         }
h2 {color: #115bca;}
a {
   color: #f00;
}
button {
   padding: 10px 20px;
   cursor: pointer;
   background-color: #e3e6eb;
   color: #efefeb05;
}
.positioned {
   position: static;
   background: yellow;
}
.card {
   width: 100px;
   height: 100px;
   margin: 20px;
   border-radius: 20px;
   background-color: blueviolet;
   text-align: center;
   padding-top: 45px;
}
.four {
   background-color: aliceblue;
}
/* не використовують id для css */
#spus {
   background-color: rgb(156, 95, 21);
}
.hra {
    font-size: 30px;
};
.box {
   /* width:500px;
   height:500px;
   border:5px solid #f00;
   position:relative; */
   width: 100%;
   max-width: 500px;
   height: 500px;
   border: 5px solid #f00;
   position: relative;
}
.item {
   /* width:50px;
   height:50px;
   background-color: #f00;
   border-radius:100%;
   position: fixed;
   right:20px;
   bottom:50px; */
    width:50px;
   height:50px;
   background-color: #f00;
   border-radius:100%;
   position: static;
   right:0;
   bottom:100px;
}
     HTML CSS 

    Result
    Skip Results Iframe

EDIT ON

.header, .footer, .sticky h2 {
   border: 3px solid #f00;
   padding:30px;
}
.side {
   width:50%;
}
.sticky {
   position:sticky;
   float:right;
   top:0;
   width:50%;
}
.sticky h2 {
   color:#f00;
   background-color: rgba(255,0,0, 0.08);
}