Why is there blank space to the right of my website?

Question

I have been making my own personal site with Animate.css and noticed there was a blank spot to the right and couldn't figure out why

Here is my code:

<!DOCTYPE html>
<html>

<head>
  <style>

    .hudson {
          color: white;
          position: relative;
          font-size: 60px;
          left: 400px;
          top: 110px;
          font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
            }

      .threeD {
        text-shadow: 
           0 1px 0 #ccc,
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
              }

      .p1 {
         position: relative;
         top: 75px;
         left: 100px;
         -webkit-animation-delay: 1s;

      }

      .p2 {
         position: relative;
         top: 85px;
         left: 100px;
         -webkit-animation-delay: 1s;
      }

      .p3{
          position: relative;
          top: 95px;
          left: 95px;
          -webkit-animation-delay: 1s;
      }

      .coding {
          position: relative;
          top: -325px;
          left: 535px;

      }

      .paracolor {
            color: skyblue;
            font-size: 25px;
            font-family: Tahoma, Geneva, sans-serif;
            }

      .img1 {
          position: relative;
          top: 250px;
          left: 20;
            }

    body {
    background-image: url(PICTURES1/mountains4.jpeg);
    background-size: 102%;
    background-repeat: no-repeat;
         }

  </style>
</head>
  <link rel=stylesheet href="CSS3/animate(1).css">
<body>
    <h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
    <p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
    <p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford  to study computor science of computor engineering.</p> 
    <p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
  <img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>

Thank you for the help and responses!

How wide is that `mountains4.jpeg` file? As wide as your screen or less? — J. Titus, Jan 12 '16 at 03:01
You've got some grammatical/spelling errors in the text of the site. See below for suggested text: Hudson Reamer I am a young technology and coding enthusiast. I am currently studying HTML, CSS, and C++. I hope someday to attend MIT or Stanford to study either computer science or computer engineering. I will build people custom computers for the cost of the parts plus a $100 assembly fee. — jrdnmdhl, Jan 12 '16 at 04:11

Michael Benjamin · Accepted Answer · 2016-01-12T12:33:40.570

The large area of whitespace on the right of your page is caused by relative positioning.

You are applying position: relative to all your elements. Then you're shifting all of them to the right with left: 400px and left: 535px and left: 100px, etc. The left property defines how far to push the element from the left edge.

Also, when an element is relatively positioned, its original space is reserved. So while the elements are shifting rightward, they are also keeping their original spaces (even though they're not there anymore), and the document is being lengthened horizontally.

Remove all the left properties and see the difference. Everything shifts left and the horizontal scrollbar disappears. DEMO

I'm not sure what your layout objective is but, simply for contrast, here's an alternative to consider: Instead of relative try absolute positioning, which removes the elements from the document flow, so their original space is eliminated.

Here's a good reference from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position

repzero · Answer 2 · 2016-01-12T03:56:19.883

All your paragraph tags have are positioned left with 'x' amount of pixels

example

p1 from left position is 100px

p2 from left position is 100px

p3 from left position is 95px

Take the above out of your css and everything should be fine

snippet below

  <style>

    .hudson {
          color: white;
          position: relative;
          font-size: 60px;
          left: 400px;
          top: 110px;
          font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
            }

      .threeD {
        text-shadow: 
           0 1px 0 #ccc,
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
              }

      .p1 {
         position: relative;
         top: 75px;
 
         -webkit-animation-delay: 1s;

      }

      .p2 {
         position: relative;
         top: 85px;
 
         -webkit-animation-delay: 1s;
      }

      .p3{
          position: relative;
          top: 95px;
 
          -webkit-animation-delay: 1s;
      }

      .coding {
          position: relative;
          top: -325px;
          left: 535px;

      }

      .paracolor {
            color: skyblue;
            font-size: 25px;
            font-family: Tahoma, Geneva, sans-serif;
            }

      .img1 {
          position: relative;
          top: 250px;
            }

    body {
    background-image: url(PICTURES1/mountains4.jpeg);
    background-size: 102%;
    background-repeat: no-repeat;
         }

  </style>
</head>
  <link rel=stylesheet href="CSS3/animate(1).css">
<body>
    <h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
    <p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
    <p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford  to study computor science of computor engineering.</p> 
    <p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
  <img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>

score 1 · Answer 3 · answered Jan 12 '16 at 03:25

1

its your hudson, p1, p2 ,p3 absolute left is making all the way to the right. you could replace "left:" in these styles with text-align: center;

answered Jan 12 '16 at 03:25

Mohamed Athif

468
2
6
19

Why is there blank space to the right of my website?

3 Answers3

Linked