How to take the margins from the page? HTML/CSS

Question

I’m new in the business. I’m trying to build a front for my current company. They asked for a prototype. I created a login screen, but the page has some default borders that I can’t take out. I want all the content to grab the entire screen, no edge at all. As you can see in the image, there are edges on the top, the sides and the bottom. I want nothing, I want you to take the whole page. Can someone help me?

Sorry if you have code errors and please tell me, so it would help me in this process!= D

.content{
    box-sizing: border-box; /* Faz com que não exceda o tamanho configurado no width/height*/
    font-family: "Segoe UI", Candara, fantasy, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    max-width: 100%;
    min-height: 100%;
    position: static;

}
.header {
    width: 100%;
    height: 100px;
    position: static;
    box-sizing: border-box; /* Faz com que não exceda o tamanho configurado no width/height*/
    text-align: center;
    overflow: hidden; /* faz o div não aumentar a altura por conta da imagem*/
    border: 1px solid darkgray;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,e0eff9+60,e0eff9+60,d8e1e7+88 */
background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,246,248,1) 0%, rgba(224,239,249,1) 60%, rgba(224,239,249,1) 60%, rgba(216,225,231,1) 88%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,246,248,1) 0%,rgba(224,239,249,1) 60%,rgba(224,239,249,1) 60%,rgba(216,225,231,1) 88%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,246,248,1) 0%,rgba(224,239,249,1) 60%,rgba(224,239,249,1) 60%,rgba(216,225,231,1) 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#d8e1e7',GradientType=0 ); /* IE6-9 */


}
.logo{
    text-align: center;
}
.msg-login{
    height: 10px;
    width: 100%;
    box-sizing: border-box; /* Faz com que não exceda o tamanho configurado no width/height*/
}
h1#msg-login{
    text-align: center;
    margin-top: -8px;
    line-height: 5; /* espaçamento entre linhas */
}
section{
    padding-top: 100px;
    text-align: center;
    padding-bottom: 110px;
    border: 1px solid darkgray;
    padding-bottom: 230px;
    border-block-start: 0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,e0eff9+12,b5c6d0+60,d8e1e7+88 */
background: rgb(242,246,248); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,246,248,1) 0%, rgba(224,239,249,1) 12%, rgba(181,198,208,1) 60%, rgba(216,225,231,1) 88%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(242,246,248,1) 0%,rgba(224,239,249,1) 12%,rgba(181,198,208,1) 60%,rgba(216,225,231,1) 88%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(242,246,248,1) 0%,rgba(224,239,249,1) 12%,rgba(181,198,208,1) 60%,rgba(216,225,231,1) 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#d8e1e7',GradientType=0 ); /* IE6-9 */


}
#input-usuario{
    width: 350px;
    height: 35px;
    padding-left: 5px;
    font: normal 15px sans-serif;
    color: #1d1c1ca8;
    border-radius: 5px;
    border: 2px solid #0ab3f7;
    outline: none; /* cor da borda quando você clica no input*/
    cursor: pointer;
}
#input-senha{
    width: 350px;
    height: 35px;
    padding-left: 5px;
    font: normal 15px sans-serif;
    color: #1d1c1ca8;
    border-radius: 5px;
    border: 2px solid #0ab3f7;
    outline: none; /* cor da borda quando você clica no input*/
    cursor: pointer;
}
p.user-msg{
    line-height: 0; /* espaçamento entre linhas */
    padding-right: 300px;
}
p.password-msg{
    line-height: 0; /* espaçamento entre linhas */
    padding-right: 310px;
}
#idioma-msg {
    line-height: 4; /* espaçamento entre linhas */
    
}
#idioma {
    height: 28px;
    border-radius: 5px;
    border: 2px solid #0ab3f7;
    outline: none; /* cor da borda quando você clica no input*/
    cursor: pointer;
}
a:link{
    text-decoration: none;
    color: rgb(26, 128, 0);
}
a:hover{
    color: orangered;
}
button{
    padding-left: 15px 15px;
    font: normal 20px sans-serif;
    border-radius: 12px;
    border: 1px solid white;
    background: #feffff;
    background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 48%, #a0d8ef 100%);
    background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 48%,#a0d8ef 100%);
    background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 48%,#a0d8ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
    color: #034963;
    box-shadow: 0px 0px 6px #9c9c9c;
    /* text-indent: 5px; */
    width: 150px;
    height: 40px;
    display: inline-block;
    margin-left: 0px;
    transform: translate(1px, 50px);
}
button:hover{ /*ao passar o mouse no botão, ele inverte o gradiente*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+52,feffff+100 */
background: #a0d8ef; /* Old browsers */
background: -moz-linear-gradient(top,  #a0d8ef 0%, #ddf1f9 52%, #feffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a0d8ef 0%,#ddf1f9 52%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a0d8ef 0%,#ddf1f9 52%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */
cursor: pointer; /*aparece uma mãozinha quando passa em cima.*/
}
#magentafooter{
    padding-top: 2px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.far fa-user{
    padding-left: 15px;

}

<!DOCTYPE html>
<html lang='pt'>
<head>
    <title>GTM</title>
    <link rel="stylesheet" href ="style.css">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="function.js"></script>
</head>
<body>
    <div class="content">
        <div class="header">
            <header>
                <img src="logoedit.png" id="logo" width="300" height="100">
            </header>
        </div>
        <div class="msg-login">
            <h1 id="msg-login">Entrar</h1>
        </div>
        <section>
            <form action="#" method="POST">
                
                <label for="input-usuario"><p class="user-msg"></p><br></label>
                <i class="fa fa-group" aria-hidden="true"></i>
                <input type="text" id="input-usuario" value="" placeholder="Usuário" required="true">
                
                <label for="input-senha"><p class="password-msg"></p></label>
                <i class="fa fa-spinner" aria-hidden="true"></i>
                <input type="password" id="input-senha" value="" placeholder="Senha" required="true">
            </form>
            <label for="idioma" id="idioma-msg">Idioma</label>
                <select name="idioma" id="idioma" required>
                    <option disabled selected>Selecione</option>
                    <option value="pt">Português</option>
                    <option value="en">Inglês</option>
                    <option value="es">Espanhol</option>
                </select><br>
            <div id="forget-pass" class="fp">
                
            </div>
            <a href="Mudar Senha/index-mudarSenha.html">Esqueceu sua senha?</a><br>
            <button type="submit"  id="button" onclick="(login())">Acessar</button>
        </section>
        <footer class="footer">
        </footer>
    </div>
</body>
</html>

Answer 1

Use in your CSS the following snippet:

html, body {
  margin: 0;
  padding: 0;
}