How to center navbar with CSS

Hello Mentors,

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

<!DOCTYPE html>

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

    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;


  <div class="menu">
      <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>

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

  <div class="container">
    <div class="box1">
      <img src="" target="_blank" style="width:40vw; height:45vw;">

    <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>

    <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>


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.


You can use flexbox and justify-content: center.

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