How to delete the extra white space of the body height when I move my sections up

Question

I'm making a website, and want to add a colorful circle background across sections. However, as I rotate the circles, they add extra heights to the body. It causes the extra white space at the end of my page.

How can I remove those white spaces? Or if anyone have an idea how to add a color background across section to section without adding height to the body?

This is what I've done so far:

 .green { width: 400rem; height: 70rem; background-color: rgba(23, 132, 17, 0.2); transform: rotate(30deg); position: relative; left: -40%; bottom: -30rem; }.blue { width: 400rem; height: 70rem; background-color: rgba(34, 116, 165, 0.2); transform: rotate(15deg); position: relative; left: -40%; bottom: 40rem; }

 <section class="intro"> <div class="container"> <h3><span>Supportive Care</span> reduces the rates of re-hospitalization and unnecessary procedures and increases patient satisfaction. It allows patient/family to be more in tune with what's going on and what choices are available to them.</h3> <h3>We develop a plan of care consistent with the patient/family's cultural, social, religious and spiritual beliefs, review advanced directives and POLST (Physical Orders for Life-sustaining Treatment), discuss prognosis, disease course and realistic expectations, and coordinate care with all the physicians on the case.</h3> </div> <div class="green"></div> <div class="blue"></div> </section>

The circle are.blue and.green. between intro and FAQ sections.

Answer 1

Do one thing. give your body tag

body{
 overflow: hidden;
 width: 100%;
 height: 100vh;
}

or else make a parent of class of you section intro and give those property to it..