Décalage des liens dans header

Bonjour à tous !

J'ai besoin de vous pour m'aider sur un petit problème...

Le soucis, c'est que lorsque je redimensionne la page, que ce soit sur un écran d'ordinateur ou bien un smartphone, les liens du header sortent du header.

Quelques images pour illustrer le problème et aussi mon code :

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- CSS Image / others -->
    <link rel="stylesheet" href="css/style.css">
    <title>Kevin Cheng - Porfolio</title>
  </head>

  <body>
    <div class="contrainer-fluid">
        <header class="container-fluid">  
            <img src="image/logo_ck.png" class ="logo"> 
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Project</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </header>
    </div>
    
    

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Hello, world!</h1>
                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 2</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 3</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 4</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 5</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 6</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 7</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
             <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 8</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="jumbotron">
                    <h1 class="display-4">Windows 9</h1>
                    <p>In progress ...</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button"> . . . </a>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

et le CSS :

body {
	background-color : grey;
}

h1 {
	color : white;
}

.nav a { 
	color : white;
	text-decoration: none;
	font-size: 20px;
}

.nav a:hover {
	color : black;
	text-decoration:  none;
}
header {
	border-bottom : 1px white solid;
	background-color : black;
	height: 130px;
	margin-bottom: 30px;
}

.nav-item {
	border-radius: 10px;
	border : 1px white solid;
	text-align: center;
	margin-left : 100px;
	margin-top: 40px;
	margin-right: 175px;
}

.nav-item:hover {
	background-color: white;
	color : black;
}

.nav { 
	text-decoration: none;
	float : right ;
	margin-right: 300px;
	color : white;
}

.logo { 
	float : : left;
	padding-top : 13px;
	padding-left: 100px;
}

Page quand elle est fullscreen et redimensionner :

fullscreen

redimensionner

Merci d'avance pour votre aide !

kevincheng

17 décembre 2018 à 12:05:58

Dylan R.

17 décembre 2018 à 12:19:05

bonjour.

je pense que c'est ton float sur nav et logo qui pose problème.

si tu ne veux pas trop t'embêter passe ton header en flex avec space-between

-
Edité par Dylan R. 17 décembre 2018 à 12:22:31

Offkors

17 décembre 2018 à 12:21:07

Salut,

C'est à cause des margin que tu as mis sur tes boutons et ta navigation. Il faudrait que tu regardes pour changer ça et plutôt mettre en place le flexbox qui sera beaucoup mieux adapté je pense.

18 décembre 2018 à 0:28:22

Bonsoir !

Merci les man ! J'ai effectivement utilisé la flexbox et ça fonctionne !

Bien joué à vous :)

TuxZero

18 décembre 2018 à 2:00:49

Bonsoir,

Pense a mettre le sujet en résolu

redimensionner la page web fait sortir les liens du header

Décalage des liens dans header

Supprimer

Modérer

Signaler le message aux modérateurs