Solution 1 :

try to implement this css class :

.no-scrollbar::-webkit-scrollbar {
    display: none;

Solution 2 :

The best way to fix overflow in mobile devices is through responsive design.

Use a media query for mobile devices, and then inside of it, fix the part overflowing.

It would look like

@media only screen and (max-width:760px){
   //adjust padding

And make sure you have this inside your html head tags in your html file

<meta name="viewport" content="width=device-width, initial-scale=1">

Problem :

When I am viewing my page with these settings on my desktop, the website seems to have no problem.
But when I open my page on my mobile device, the navigation bar overflows and makes the page horizontally scrollable.

How I want my page to work?
I want the page to be horizontally non-scrollable, and make the navigation bar elements centered and adapt with the resolution of my device. However, I don’t want the navigation bar to expand beyond 650px. I have set the header background to red for showing the overflow I get on my mobile device. Image of my problem (nav bar isnt centered + overflowing)

header *{
  margin-bottom: 0px;
  padding-left: 3.5vw;
  padding-right: 3.5vw;
  padding-top: 10px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;;
  max-width: 650px;
  background-color: red;
  color: #cacaca;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;

.nav_links {
  list-style: none;

.nav_links li {
  display: inline-block;
  padding: 0px 0px;

.nav_links li a {
  transition: all 0.3s ease 0s;

.nav_links li a:hover {
  color: #ffffff;
  transition: all 0.3s ease 0s;


Comment posted by……

Comment posted by

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer’s long-term value. You can find more information on how to write good answers in the help center:

Comment posted by Tasrif Rahman

could you provide me an example on how to adjust the padding for the nav bar or provide me a documentation? I am very new to html so it is a bit difficult for me to understand few things. also I had the meta tag in my head tag.

Comment posted by Renan Mougenot

The padding-left and padding-right are causing overflow. They are set as 3.5vw (which is 3.5 viewport width). To adjust the padding, just make those numbers smaller (like 1.5vw). Try different numbers until you solve the overflow

Comment posted by Tasrif Rahman

Even if I put the padding to 0, the list elements are not centered for some reason .