How to center navbar with CSS

1

Hello Mentors,

Could you please tell me how can I center the nav bar with just CSS?
The code is below…
Thanks!

Topmenu
Topmenu1873×113 5.72 KB

<!DOCTYPE html>
<html>

<head>
  <title>Landing Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    body {
      box-sizing: border-box;
      background-color: rgb(230, 227, 208);
    }

    .menu {
      width: 100%;
      height: 5vw;
      margin: 0;
      padding: 0;
      list-style-type: none;
      background-color: rgb(37, 31, 31);
      left: 200px;
    }

    li {
      left: 200px;
      display: inline;
      padding: 10px;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }

    li a {
      left: 200px;
      padding: 33px 35px;
      float: center;
      text-decoration: none;
      color: white;
    }

    header {
      left: 200px;
      text-align: center;
      font-size: 40px;
      font-weight: bolder;
    }

    .container {
      height: 60vw;
      display: flex;
      position: relative;
      flex-direction: row;
    }

    .box1 {
      width: 50vw;
      border-image-slice: 10%;
      margin-left: 30px;
      flex: 1;
    }

    .box2 {
      align-self: center;
      flex: 1;
      width: 50vw;
    }

    footer {
      background-color: rgb(29, 22, 22);
      font-size: 15px;
      text-align: center;
      color: blanchedalmond
    }

    .more-detail {
      background-color: orange;
      COLOR: white;
    }
  </style>
</head>

<body>

  <div class="menu">
    <ul>
      <li><a href="#">The Book Series </a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">TheAuthor</a></li>
      <li><a href="#">Free resources</a></li>
    </ul>
  </div>

  <header>You dont know JavaScript!</header>

  <div class="container">
    <div class="box1">
      <img src="https://webdevcatalog.com/links/frontend/javascriptimages/YDKJS.png" target="_blank" style="width:40vw; height:45vw;">
    </div>

    <div class="box2">
     <b><span>Dont just drift through JavaScript</span><br><br><br>
     <span>Understand how JavaScript works</span><br><br><br>
     <span>Start your journey through the bunmpy side of JavaScript</span><br><br><br>
     <span><a href#>Order your copy now</a></span><br><br><br></b>
    </div>
  </div>

  <footer>
    <span>The first ebook in the book series is absolutely free.</span><br>
    <span class="more-detail"><a href="#">Find more about this book</a></span>
  </footer>
</body>

</html>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

You can use flexbox and justify-content: center.

.menu {
  display: flex;
  justify-content: center;
}
1 Like