Problème arrière plan du site

Salut ! Je suis en train de développer un Portfolio et j'ai un problème concernant l'arrière plan du site :

Sur l'image eco+ jointe les rectangles rouges représente un espace blanc et vide autour du nav qui ne le relie donc pas directement au Header et au Main et j'aimerais de l'aide pour l'enlever

header {
    display: block;
    width: 100%;
    height : 100%;
    background-image: url("../images/DSC00285.png");
    background-repeat: no-repeat; 
    background-size: cover;
}

body {
    margin : 0;
    width : 100%;
    display : block;
    padding : none;
}

nav {
    padding-top: 10px;
    background-color: #434343;
    background-size: 100%;
    width : 100%; 
}
nav ul {
    display: flex; 
    flex: auto; 
    flex-wrap: wrap; 
    width : 100%;
    padding : 0;
    list-style: none;
    justify-content: space-between; 
}
nav li {
    width : 100px;
    padding : 5px;
}

main {
    background-image: url(../images/DSC00287.JPG);
    background-size: cover;
}

voici mon CSS et merci de me répondre vous m'aiderez beaucoup

Bonsoir,

Est-ce que ça résout le problème si tu supprimes cette ligne :

padding-top: 10px;

Non justement je l'avais rajouté comme "cache misère" si je peux dire.
Le nav avec cette ligne cache le rectangle rouge du dessus
mais j'ai beau essayer je n'arrive pas à enlever celui du dessous

Bonjour,

Il faudrait nous montrer un html minimal associé à ces styles.

Parce que là, c'est une peu "devinette".

EDIT: si le <ul> que semble contenir le <nav> est le seul fils de <nav>, essaie un margin:0 sur ce <ul>.

Amicalement,
Modifié par parsimonhi (07 Jan 2019 - 11:22)