Liste de navigation et positionnement

Salut à tous, je suis ultra débutant et suis une formation web en parallèle (pour l'instant HTML CSS simplement).
J'ai besoin de votre aide.

Je m'entraîne à créer une barre de navigation à l'aide d'une liste. J'ai 4 images/liens qui sont inline horizontales. Or, quand je prends ma création sur google chrome et que je change la taille de ma fenêtre, mes 4 images , horizontales quand ma fenêtre est en plein écran, vont se mettre les unes en dessous des autres. Voici mes codes :

HTML tout d'abord : (les liens c'était juste pour tester)

 <header>
            <div id="header">
                <ul>
                    <li><a id="sport" href="http://www.google.fr">Sport</a></li>
                    <li><a id="sante" href="http://www.google.fr">Santé</a></li>
                    <li><a id="Nutrition" href="http://www.google.fr">Nutrition</a></li>
                    <li><a id="Bodylifeurs" href="http://www.google.fr">Bodylifeurs</a></li>
                </ul>
                    
            </div>
        </header>

CSS ensuite :

header div
{
        display: inline;
        width: 500px;
        text-align: center;
        margin: 0px;
        padding: 0px;
}

header div ul li
{
    display: inline;
    list-style: none;
}

 #sport
{
    background-image: url('images/bouton1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 100px;
    padding-right: 120px;
    padding-left: 120px;
    padding-bottom: 100px;
    margin-left: 30px;
    margin-right: 30px;
}

#sante
{
    background-image: url('images/bouton1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 100px;
    padding-right: 120px;
    padding-left: 120px;
    padding-bottom: 100px;
    margin-left: 30px;
    margin-right: 30px;
}

#Nutrition
{
    background-image: url('images/bouton1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 100px;
    padding-right: 120px;
    padding-left: 120px;
    padding-bottom: 100px;
    margin-left: 30px;
    margin-right: 30px;
}

#Bodylifeurs
{
    background-image: url('images/bouton1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 100px;
    padding-right: 120px;
    padding-left: 120px;
    padding-bottom: 100px;
    margin-left: 30px;
    margin-right: 30px;
}

Merci à tous
Modifié par LeToutPetit (24 Apr 2017 - 18:03)

Bonsoir.

Avant toute chose... changez de formation. Elle ne fait pas son travail.

D'abord le code est affreusement redondant, ce que vous mettez dans
#sport, #sante, #Nutrition, #Bodylifeurs, il suffit de le mettre une fois dans :
#header ul a (background-image excepté...)
ce qui rend le code plus lisible et plus maintenable.

Ensuite, il ne sert à rien de mettre 'width : 500px' pour 'header div' si ce div est affiché en tant qu'élément inline, ça ne fonctionne que pour les éléments blocs...

Enfin, si les éléments passent à la ligne, c'est qu'elles n'ont pas assez de place en largeur (margin-left et margin-right de 30px et padding-left et padding-right de 120px). Les autres padding et margin haut et bas ne sont pas appliqués, les liens (' a') sont des éléments inline...

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-modele-des-boites