How to clear unnecessary scroll from document?

How do i get rid of this down below scroll?

My html:

<div class="nav-container">
    <ul class="nav">
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    </ul>
    
    <ul class="nav2">
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    </ul>
    
    <ul class="nav3">
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    </ul>
    
    <ul class="nav4">
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    </ul>

My CSS:

.nav-container {position: relative; left: 80%; padding: 0; margin: 0;}

.nav {background-color: antiquewhite; padding: 5px; margin-right: 80%; list-style-type: none; }
.list {display: inline;  }
.link {text-decoration: none; padding: 25px; }

.nav2 {background-color:darkgray; padding: 5px; margin-right: 80%; list-style-type: none;}
.list2 {display: inline; }
.link2 {text-decoration: none; padding: 20px;}

.nav3 {background-color: aquamarine; margin-right: 80%; padding: 5px; position: relative; top: -15.6px;}
.list3 {display: inline; }
.link3 {text-decoration: none; padding: 20px;}

.nav4 {background-color: dodgerblue; margin-right: 80%; list-style-type: none; height: 150px; position: relative; top: -32px;}
.list4 {display: inline;}
.link4 {text-decoration: none; padding: 12px; }

This will fix it, with a caveat:

body {
  max-width: 100%;
  overflow-x: hidden;
}

It looks very much like you’ve used positioning and something is bigger than the viewport, in which case the above will just make the stuff that’s overflowing inaccessible, so you need to fix that I think. I can’t tell what’s anything from just that fragment of HTML though

1 Like

Thank you for reply. Here’s my full html and css, i dont know what could be an issue, i did some changes with positioning, padding and margin’s but idk where is the problem.

HTML:

<!doctype html>
<html>
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="description" content="Testing site">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP">
<meta name="author" content="Ismar">
<meta http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Index.css">
</head>
<body>
    
<div id="navbar">
  <ul>
    <li><a href="#">Forum's</a></li> 
     <li><a href="#">Chat's</a></li> 
     <li><a href="#">Login</a></li> 
     <li><a href="#">Sign up</a></li> 
  </ul>
</div>
<div id="container1">
    <div class="well">
        <p1>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p1></div>
    <div class="well1">
    <p2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p2>
    </div>
    </div>
<div class="container">
<div class="col">
    <div class="col-lg">1</div>
    <div class="col-lg">2</div>
    
    </div>
    </div>
<div class="nav-container">
    <ul class="nav">
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    <li class="list"><a class="link" href="#">Link</a></li>
    </ul>
    
    <ul class="nav2">
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    <li class="list2"><a class="link2" href="#">Link2</a></li>
    </ul>
    
    <ul class="nav3">
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    <li class="list3"><a class="link3" href="#">Link2</a></li>
    </ul>
    
    <ul class="nav4">
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    <li class="list4"><a class="link4" href="#">Link2</a></li>
    </ul>
    
  
    </div>   
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    </body>
</html>
    

CSS:

body 
    {
    margin: 0; 

    }

#navbar ul {
    margin: 0;
    padding: 5px;
    border-bottom:1px solid;
    list-style-type: none;
    background-color: #8B008B;
}

#navbar ul li {
    display: inline;
}

#navbar ul li a {
    text-decoration: none;
    padding: .2em 11em;
    color: white;
    background-color: #8B008B;
}

#navbar ul li a:hover {
    color: #0EC6D7;
    background-color: #8B008B;
}


#container1 {
    position: relative; 
    background-color:antiquewhite; 
    height: 500px;
}

.well {
    position: relative; 
    width: 650px; 
    float: left; 
    border-right: 1px solid; 
    padding-bottom: 300px; 
}
.well1 {
    position: relative; 
    float: right; 
    width: 650px; 
    border-left: 1px solid; 
    padding-left: 15px; 
    padding-bottom: 300px;}

.col .col-lg {border: 1px solid; }

.nav-container {position: relative; left: 80%; padding: 0; margin: 0;}

.nav {background-color: antiquewhite; padding: 5px; margin-right: 80%; list-style-type: none; }
.list {display: inline;  }
.link {text-decoration: none; padding: 25px; }

.nav2 {background-color:darkgray; padding: 5px; margin-right: 80%; list-style-type: none;}
.list2 {display: inline; }
.link2 {text-decoration: none; padding: 20px;}

.nav3 {background-color: aquamarine; margin-right: 80%; padding: 5px; position: relative; top: -15.6px;}
.list3 {display: inline; }
.link3 {text-decoration: none; padding: 20px;}

.nav4 {background-color: dodgerblue; margin-right: 80%; list-style-type: none; height: 150px; position: relative; top: -32px;}
.list4 {display: inline;}
.link4 {text-decoration: none; padding: 12px; }

Im not trying to make a design, im only practicing using ideas from my head, i only wanted to make navigation bar like the one in picture with those Link’s and move it to right, thats all. When i need help of some design that i wish to create i will gladly post on forum.

As @camperextraordinaire already stated, your horizontal scroll bar is visible because left: 80%; + width of the links block is more then 100%. so, you need to ether change the left 80% to a lower value or limit your max-width of links block to 20%.

I suggest you should read more about grid to position your element.
The problem is you move elements over the viewport(1 screen size).

HTML Part

<div class="nav-container">
  <ul class="nav" id="nav1">
    <li><a class="padding-25" href="#">Link</a></li>
    <li><a class="padding-25" href="#">Link</a></li>
    <li><a class="padding-25" href="#">Link</a></li>
    <li><a class="padding-25" href="#">Link</a></li>
  </ul>
  
  <ul class="nav" id="nav2">
    <li><a class="padding-20" href="#">Link2</a></li>
    <li><a class="padding-20" href="#">Link2</a></li>
    <li><a class="padding-20" href="#">Link2</a></li>
    <li><a class="padding-20" href="#">Link2</a></li>
  </ul>
  
  <ul class="nav" id="nav3">
      <li><a class="padding-20" href="#">Link2</a></li>
      <li><a class="padding-20" href="#">Link2</a></li>
      <li><a class="padding-20" href="#">Link2</a></li>
      <li><a class="padding-20" href="#">Link2</a></li>
  </ul>
  
  <ul class="nav justify-content-center" id="nav4">
    <li><a class="padding-12" href="#">Link2</a></li>
    <li><a class="padding-12" href="#">Link2</a></li>
    <li><a class="padding-12" href="#">Link2</a></li>
    <li><a class="padding-12" href="#">Link2</a></li>
  </ul>
</div>

CSS Part

.col .col-lg {border: 1px solid; }

.nav-container{
  position: relative;
  float: right;
  padding: 0;
  margin: 0;
  display: inline;
}

.nav{
  padding: 5px;
  list-style-type: none;
}

#nav1{
  background-color: antiquewhite;
}

#nav2{
  background-color: darkgray;
}

#nav3{
  background-color: aquamarine;
}

#nav4{
  background-color: dodgerblue;
  height: 150px;
}

.padding-25{
  padding: 25px;
}
.padding-20{
  padding: 20px;
}
.padding-12{
  padding: 12px;
}

According to your codes, I see the Bootstrap included in HTML.
Here is how you position elements in Bootstrap;
Bootstrap - Grid system
and also
Bootstrap - Navbar
Bootstrap - Nav