why my links are not centered ? (in menu bar)

Question

When I Click on menu bar .links are not centered properly. I don't know why it's happening and where. I even inspect the code but didn't understand. Please explain what's wrong in my code. I am very confused so I decided not to try more.

* {
    padding: 0;
    margin: 0;
}
.nav_bar {
    background: gray;
    display: flex;
}
.links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5%;
}

li {
    list-style: none;
    padding: 0 5% 0 5%;
    margin-right: 5%;
}
.txt {
    margin-right: auto;
    font-size: calc(2vw + 1.6rem);
    padding: 0 5% 0 5%;
}
a {
    text-decoration: none;
    color: black;
}

/* hamburger */

#toggle {
    display: none;
  }

  label {
    font-size: 32px;
    display: none;
    position: absolute;
    right: 5%;
  }

@media (max-width: 1000px)
{
    li {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    label {
        display: block;
        cursor: pointer;
      }
    .links {
        display: none;
        margin-top: 7vh;
        width: 100%;
        text-align: center;
    }
    .links a {
        font-size: 23px;
        text-decoration: none;
        color: rgb(102, 123, 145);
        line-height: 50px;
        font-weight: 500;
        color: white;
    }
    #toggle:checked + .links {
        display: block;
        animation: links 1s forwards;
    }
    @keyframes links {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }
}


        LOGO
      ☰
      
      
      
        
        Home
        Products
        Contact
        About
      
    
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic odit libero aut blanditiis at iste nihil nesciunt cupiditate enim. Accusamus, facere enim alias libero necessitatibus magni? Delectus nostrum ullam vero ratione quasi quae a aspernatur! Fugiat voluptatum, quis adipisci laboriosam temporibus tempore animi nobis omnis porro ducimus maxime officia sed ipsum sit perspiciatis reiciendis, ad, natus vel repudiandae? Praesentium ut doloremque inventore quo necessitatibus labore dicta magni at rem doloribus possimus aspernatur alias corporis voluptates cumque dolorum, nesciunt delectus magnam blanditiis sed exercitationem cum. Maiores velit quos magni veritatis exercitationem nesciunt repellat libero voluptates dicta eum eius tempora, unde

user_11588272 · Answer

The txt div is taking the left space. You can add flex-wrap: wrap on the .nav_bar this will get the links underneath the logo & icon.

user_8620333 · Answer

Make the navbar position:absolute on small screen so it can take the whole width and you will have the content centred.

You can also replace the animation with a simple transition:

* {
  padding: 0;
  margin: 0;
}

.nav_bar {
  background: gray;
  display: flex;
  position: relative; /* added */
  z-index: 0; /* added */
}

.links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 5%;
}

li {
  list-style: none;
  padding: 0 5% 0 5%;
  margin-right: 5%;
}

.txt {
  margin-right: auto;
  font-size: calc(2vw + 1.6rem);
  padding: 0 5% 0 5%;
}

a {
  text-decoration: none;
  color: black;
}


/* hamburger */

#toggle {
  display: none;
}

label {
  font-size: 32px;
  display: none;
  position: absolute;
  right: 5%;
}

@media (max-width: 1000px) {
  li {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  label {
    display: block;
    cursor: pointer;
  }
  .links {
    /* added */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: inherit;
    /**/
    margin-top: 40px;
    display:block;
    width: 100%;
    text-align: center;
    transform: translateX(-100%);
    transition: 1s all;
  }
  .links a {
    font-size: 23px;
    text-decoration: none;
    color: rgb(102, 123, 145);
    line-height: 50px;
    font-weight: 500;
    color: white;
  }
  #toggle:checked+.links {
    transform: translateX(0);
  }
}


  LOGO
  ☰
  
  
  
    
    Home
    Products
    Contact
    About

why my links are not centered ? (in menu bar)

2 Answers