Page width higher than page width and I don't know why

Question

The page width is alright when I only display the page header, but when I add anything under it, I get some extra space on the right. Any ideas (that don't include removing the horizontal scroll bar) ?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* FONTS */

    @import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Patua+One&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Lora:700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

    /* ANIMATIONS */

    @keyframes slideFromRight {
      0% {
        transform: translateX(30px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* GENERAL*/

    body {
      margin: 0;
    }

    header {
      background-image: linear-gradient(to bottom right, #0073ff, #8fc1ff);
      color: white;
      height: 100vh;
      width: 100vw;
    }

    header > p {
      position: absolute;
      display: inline;
      margin: 0;
    }

    header > p.title {
      font-family: "Patua One", "cursive";
      letter-spacing: 1.5px;
      top: 50%;
      transform: translateY(-50%);
      width: 100vw;
      text-align: center;
      font-size: 80px;
      margin: 0;
    }

    header > p.motto {
      top: calc(50% + 35px);
      left: calc(50% + 90px);
      font-family: 'Muli', sans-serif;
      animation: 1s ease 0s slideFromRight;
    }
  </style>
  <title>Lorem Ipsum</title>
</head>
<body>
  <header>
    <p class="title">Lorem Ipsum Dolor</p>
    <p class="motto">Lorem ipsum dolor sit amet.</p>
  </header>
  <main>
  </main>
</body>
</html>

You need to use only 100% width. don't use 100vw because as you add more content, it will create a scroll on the right or bottom. And by putting a 100vw, it also includes the created Scroll width to overall 100vw thus creating an extra width. — MarLMazo, Feb 06 '21 at 23:37

Faisal · Answer 1 · 2021-02-07T01:37:37.983

-2

simply, because it has a position: absolute; with a top and left to that exact point.

edited Feb 07 '21 at 01:37

answered Feb 06 '21 at 23:19

Faisal

127
1
7

So how am I supposed to recreate this in a way that I don't get the additional space? – smunteanu Feb 06 '21 at 23:26
your question is not specific, there are tons of ways to do that, one of them is simply to adjust the top and left values until the element gets in the place that you want – Faisal Feb 07 '21 at 01:37

Page width higher than page width and I don't know why

1 Answers1