Falcjh Falcjh - 2 years ago 84
HTML Question

When I align 2 links to the right, a horizontal scrollbar becomes visible

As seen in the picture below, I floated 2 links to the right.

When I did that a horizontal scrollbar came on the screen.

How can i make it fit the screen?

enter image description here

Here is my code:

body {
background-color: green;
width: 100%;
margin: 0 auto;
/*Navigation bar*/

nav {
background-color: #47476b;
overflow: auto;
nav a {
color: white;
font-size: 1.2em;
text-decoration: none;
padding: .5em;
background-color: #47476b;
margin-right: -0.3em;
float: left;
display: inline-block;
.right {
float: right;

<a class="active" href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<div class="right">
<a href="#">Link 7</a>
<a href="#">Link 8</a>

Answer Source

Include this css:

nav {
    width: 100%;
    overflow-x: hidden;
nav a {
    margin-right: 0px;

This width: 100%; makes the navbar's width in percentage that will occupy the full width of the screen. And overflow-x: hidden; makes all extra space / overflow in x-axis be not visible so it won't render a scrollbar.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download