CODEWITHSUNDEEP
htmlcss
BDR
BDR

Reputation: 464

Navigation bar moving left/right

I have two simple pages. The only thing that changes is the content in <content> tag.

But the navigation bar is not exactly at same position on the two pages. It's more to the left on the about.html page. The navigation bar is ~4px offset on my computer, I need two tabs open and switch between them to see the problem.

I tested it with lastest Chrome and Firefox browsers. The problem only occurs with the computer with a browser at full screen.

After using Chrome debug I found something strange. On home page, the html tag is 1513px witdh, with the other page it is 1496px width?!

Home.html
About.html

Home page

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

About page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

Upvotes: 0

Views: 169

Answers (2)

Richard
Richard

Reputation: 7433

What's causing this?

It's not just your navigation bar that is moving, it's your whole body element. Furthermore, it only seems like it's moving, but it's actually working as intended. The value auto on body's margin will always center the body element.

The home page does not have any scrollbar, but the about page has a vertical scrollbar on the right side of the page. The scrollbar takes up some width of the html element. As a result, the widths of the html element in your home page and about page are different. For instance, on my computer screen, the html element in the home page has a width of 1149px. Meanwhile, the html element in the about page has a width of 1132px. As you can see, the html width in the about page is smaller. Note that the width of the scrollbar may differ, but in my case, it has a width of 17px.

So my html element has a smaller width in the about page. So what? Well, this causes the auto values of margin in the home page and about page to be different (because the about page needs less margin to center the body element). As a result, it seems like the body element is moving.

Solution #1

What can we do? The most obvious solution is to hide the scrollbar visually. You can do this by giving scrollbar-width: none to the html element. This still allows the user to scroll (using mouse wheel), but you simply can't drag the scrollbar anymore (because it isn't there visually). Run these two snippets in your browser, the body element shouldn't be moving.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
  scrollbar-width: none;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

Solution #2

The previous solution might be a little bad for user experience simply because the presence of a scrollbar means that the page can be scrolled. The absence of one means the contrary. Besides, scrolling by dragging the scrollbar directly is also a really common behavior. As an alternative, you can opt to use this other solution.

This solution is to give the html element a width of 100vw (100% of the viewport width). What this means is that even when there is a scrollbar in your html element, the html element will stay at a width of 100vw before scrollbar and the scrollbar will be added to the html. However, doing so makes the html element to have a width of more than 100vw. Its width is now 100vw + scrollbar's width. This will cause an overflow on the x-axis of the html element, thus causing a horizontal scrollbar to appear. We can remove the horizontal scrollbar using overflow-x: hidden.

Now, the scrollbar remains and your body element does not move. Try running these two snippets on your computer, you'll see that it works.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
  width: 100vw;
  overflow-x: hidden;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
  width: 100vw;
  overflow-x: hidden;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

Upvotes: 1

Ron
Ron

Reputation: 6591

The difference is from the setting margin: auto; which centers the body automatically (but for one of the pages, the longer content, the width is a bit smaller.. thus the difference.)

However, one of the pages (home) has a height of over 1000px, and the other (about) page, is very low height

if you add to the css html tag the following:

html{
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

to force the vertical scroll to be always visible, you will have the pages identical and not moving.

You can achieve the same by adding a min-height value of something relevant to your longest page content, which is mostly an unknown value, and for each visitor it might differ based on their screen size.

Upvotes: 0

Related Questions