help with making element fullscreen - ☔︎ ∙ I need Help!

i'm working on updating a small generator i made some time ago (https://acatalepsy.neocities.org/colorlessgreen) visually along with some more code changes. i want the background to be a color and fill the whole screen. however, it leaves a margin of white at the edges for some reason. (i'm following some other online thing for height, because when i tried setting it to 100% it didn't work (though width did)). i've messed around with some things & deleted some stuff, but nothing seems to work. i'm certain i just have something left somewhere, but i just can't find it. help greatly appreciated! thank you!

here's my css and html:

Code

<!DOCTYPE html>
<html class="html">
<head>
    <link rel="stylesheet" href="green.css">
</head>
<source>
<div class="body">
    <div class="header">
        <p id="title">COLORLESS IDEAS</p>
        <p id="subscript">...sleep furiously</p>
        <p id="desc">a "grammatically correct, semantically nonsensical" sentence generator</p>
    </div>
    <div class="content">
        <p><button id="button1" onclick="genstuff()">generate</button></p>
        <p id="text">colorless green ideas sleep furiously</p>
        <script src="newideas.js"></script>
        <script src="ideas.js"></script>
        <textarea id="textbox" cols="50" rows="10">type up something here. if you want. make an attempt at meaningful interpretation, or, uh, something...</textarea>
    </div>
    <div class="description">
        <p>
            information here blah blah
        </p>
    </div>
</div>

Code

.html{
    padding:0%;
}
.body{
    background-color:seagreen;
    margin-left: 0px;
    width:100%;
    height:100%;
    padding-top: 50px;
    scroll-behavior: smooth;
    overflow-y: scroll;
    position:fixed;
}

.header{
    width: 40%;
    height: auto;
    border-radius: 5px;
    border-color:black;
    border-style: groove;
    background-color:lightgrey;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    line-height: 10px;
    text-align: center;
}

.description{
    width: 40%;
    height: auto;
    border-radius: 5px;
    border-color:black;
    border-style: groove;
    background-color:lightgrey;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    line-height: 10px;
    text-align: center;
}

#title{
    margin-left:auto;
    margin-right:auto;
    font-family: fantasy;
    font-size: large;
    font-weight: 700;
}

#subscript{
    font-size:small;
    font-style: italic;
}

.content{
    width: 50%;
    margin-left: auto;
    margin-right:auto;
    text-align: center;
    padding-bottom: 25px;
    border-radius: 5px;
    margin-bottom:25px;
    border-color:black;
    border-style: groove;
    background-color: lightgray;
}

#button1{
    background-color: seagreen;
    width: 100px;
    height:25px;
    text-align: center;
    font-family: fantasy;
}
#text{
    margin-left: 100px;
    margin-right:100px;
    text-wrap:wrap;
    text-align: center;
}

#textbox{
    border-style: inset;
}

#desc{
 
}

Vaguely similar topics! (3)