Forum : Problème avec mon menu

Bonjour, Bonsoir.

J'ai un problème d'affichage avec mon menu j'ai fait deux menu en 1 avec à gauche "Accueil, Equipe etc..." et à droite "Connexion et Inscription" Sauf que mon problème c'est que mes deux menus ne sont pas bien aligner et j'ai un second problème c'est que j'ai un peu de marge au dessus de mon menu.

Mon menu :

http://prntscr.com/ex1l9g

Code HTML :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> </head> <body>  <div class="top-bar"> <div class="nav-left"> <ul> <li><a href="index">Accueil</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Boutique</a></li> </ul> </div>  <div class="nav-right"> <ul>  <?php if(empty($_SESSION['id'])){ ?> <li><a href="login">Connexion</a></li> <li><a href="register">Inscription</a></li> <?php } ?>  <?php if(!empty($_SESSION['id'])){ ?> <li><a href="profil.php?id=<?php echo $_SESSION['id']; ?>">Mon Profil</a></li> <?php if($rang >= 700){ ?> <li><a href="admin/">Administration</a></li> <?php } ?> <li><a href="logout">Déconnexion</a></li> <?php } ?> </ul> </div> </div>

Code CSS :

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700'); body{ margin: auto; padding: auto; } .top-bar{ width: auto; height: 80px; background-color: #22313F; font-family: 'Raleway', sans-serif; font-weight: 600; } .top-bar a{ color: white; } .top-bar .nav-left ul{ list-style-type: none; } .top-bar .nav-left li{ display: inline-block; margin-left: 5px; } .top-bar .nav-left ul li a{ float: left; text-decoration: none; text-transform: uppercase; } .top-bar .nav-right ul{ list-style-type: none; float: right; } .top-bar .nav-right li{ padding-right: 15px; display: inline-block; } .top-bar .nav-right ul li a{ text-decoration: none; text-transform: uppercase; }

Je vous remercie d'avance.
Passez une bonne journée/soirée.
Cordialement, Kais

Problème avec mon menu

2 réponses