Question 260453 in Html Question posted in
Some basic documentation can be found here.

Html – Centering navbar items correctly

I’m currently learning HTML, CSS and Javacript. I’m making a restaurant website and currently working on the navbar.

I have 4 topics of the navbar (Home, menu, review and about us) and a button for contact.

<!DOCTYPE html>
<html>
<head>
    <title>Gastronomy Galaxy</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>
    <body>
            <nav>
                <ul>
                    <li><a href="Home.html">Home</a></li>
                    <li><a href="menu.html">Menu</a></li>
                    <li><a href="reviews.html">Reviews</a></li>
                    <li><a href="about.html">About us</a></li>
                </ul>
                <button id="contact">Contact</button>
            </nav>
    </body>
</html>


body{
    margin: 0;
    padding: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #A78F69;
    line-height: 70px;
    padding: 0 20px;
  }

  nav ul {
    list-style-type: none;
    background-color: #A78F69; 
    color: #fff;
    display: flex;
    margin: auto;
    padding: 0;
}

nav li {
    margin-right: 25px;
    font-size: 18px;
}

nav a {
    color: #000000;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

#contact {
    
}

I tried to centered the 4 topics but it seems that the button (aligned at the right side of the navbar) is interfiring with the centering of the 4 topics, because it seems a little off the center of the full width of the monitor…

I already saw some videos but it always has 3 main parts (An image, the topics, and the button), but I only have 2 (the topics and the button)…
Can somebody help me? Thanks! (By the way, sorry if my theres is some grammar errors)

Tags:

2

Answers


  1. 0

    A quick solution is to make margin-left instead of margin-right in nav li, also remove padding:0 in nav ul.

    Login or Signup to reply.
  2. 0

    You can try adding justify-content: center and flex-grow: 1; to the ‘nav ul’ element.

    It should look like below,

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search