Make a div to fill the whole screen

September 25, 2022

body{
    background-image: url('pace\ sfondo.jpg');
}
.banner-ministero{
    width: 200%;
    height: 1%;
    background-color: #f5f5f5;
    text-align: left;
}
.logo-min{
    width: 8%;
    height: 0.5%;
    padding-left: 9.5%;
}
.accedi{    
    width: 3%;
    height: 0.5%;
    padding-left: 19%;
    padding-bottom: 0.15%;
}
.banner-marconi{
    width: 200%;
    height: 1%;
    background-color: #efefef;
    text-align: left;
}
.foto-ban-marc{
    width: 32%;
    height: 29%;
    padding-left: 9.5%;
    padding-bottom: 0.2%;
    padding-top: 0.5%;
}
.bar-nera{
    width: 200%;
    height: 7%;
    padding-top: 0.001%;
    padding-bottom: 0.001%;
    background-color: black;
    text-align: left;
    padding-left: 29%;
    font-family: 'Montserrat', sans-serif;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stile sito marconi.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    </head>

    <body>
        <!-- Banner Mnister/Accedi-->
        <div class="banner-ministero";>
            <img class="logo-min"; src="logo ministero.png">
            <img class="accedi"; src="accedi.png">
        </div>
        <!-- Banner Marconi Indirizzi-->
        <div class="banner-marconi";>
            <img class="foto-ban-marc"; src="banner marconi.jpg">
        </div>
        <!-- Barra Navigazione Nera-->
        <div class="bar-nera";>
            <b><p style="color:white;">Istituto &nbsp&nbsp&nbsp&nbsp&nbsp Didattica &nbsp&nbsp&nbsp&nbsp&nbsp Studenti e Genitori&nbsp&nbsp&nbsp 
                Docenti e ATA &nbsp&nbsp&nbsp Modulistica &nbsp&nbsp&nbsp Comunicati 
                &nbsp&nbsp&nbsp News &nbsp&nbsp&nbsp FAQ e How-To &nbsp&nbsp&nbsp Contatti</p></b>
        </div>
    </body>
</html>

whenwver I use a div and set its dimensions,

it looks like this now

and it should look like this with left and top borders filled

it always occurs to me that it seems to be like a box and it cannot fill all the borders like shown in the picture. How can I solve this? The dimensions are set like that: the first one is the div itself, the second one is what there is inside the box, what happens is that the left corner is fixed while it continues to go forward onto the right side.

.banner-ministero{
    width: 200%;
    height: 1%;
    background-color: #f5f5f5;
    text-align: left;
}
.logo-min{
    width: 8%;
    height: 0.5%;
    padding-left: 9.5%;
}

>Solution :

Try adding margin:0; to the body tag

body{
    background-image: url('pace\ sfondo.jpg');
    margin:0;
}
.banner-ministero{
    width: 200%;
    height: 1%;
    background-color: #f5f5f5;
    text-align: left;
}
.logo-min{
    width: 8%;
    height: 0.5%;
    padding-left: 9.5%;
}
.accedi{    
    width: 3%;
    height: 0.5%;
    padding-left: 19%;
    padding-bottom: 0.15%;
}
.banner-marconi{
    width: 200%;
    height: 1%;
    background-color: #efefef;
    text-align: left;
}
.foto-ban-marc{
    width: 32%;
    height: 29%;
    padding-left: 9.5%;
    padding-bottom: 0.2%;
    padding-top: 0.5%;
}
.bar-nera{
    width: 200%;
    height: 7%;
    padding-top: 0.001%;
    padding-bottom: 0.001%;
    background-color: black;
    text-align: left;
    padding-left: 29%;
    font-family: 'Montserrat', sans-serif;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stile sito marconi.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    </head>

    <body>
        <!-- Banner Mnister/Accedi-->
        <div class="banner-ministero";>
            <img class="logo-min"; src="logo ministero.png">
            <img class="accedi"; src="accedi.png">
        </div>
        <!-- Banner Marconi Indirizzi-->
        <div class="banner-marconi";>
            <img class="foto-ban-marc"; src="banner marconi.jpg">
        </div>
        <!-- Barra Navigazione Nera-->
        <div class="bar-nera";>
            <b><p style="color:white;">Istituto &nbsp&nbsp&nbsp&nbsp&nbsp Didattica &nbsp&nbsp&nbsp&nbsp&nbsp Studenti e Genitori&nbsp&nbsp&nbsp 
                Docenti e ATA &nbsp&nbsp&nbsp Modulistica &nbsp&nbsp&nbsp Comunicati 
                &nbsp&nbsp&nbsp News &nbsp&nbsp&nbsp FAQ e How-To &nbsp&nbsp&nbsp Contatti</p></b>
        </div>
    </body>
</html>