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:

Solution 1:

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

Solution 2:

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: 
           01px0#ccc,
           02px0#c9c9c9,
           03px0#bbb,
           04px0#b9b9b9,
           05px0#aaa,
           06px1pxrgba(0,0,0,.1),
           005pxrgba(0,0,0,.1),
           01px3pxrgba(0,0,0,.3),
           03px5pxrgba(0,0,0,.2),
           05px10pxrgba(0,0,0,.25),
           010px10pxrgba(0,0,0,.2),
           020px20pxrgba(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><linkrel=stylesheethref="CSS3/animate(1).css"><body><h2class="hudson threeD animated fadeInDown">Hudson Reamer</h2><pclass="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p><pclass="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford  to study computor science of computor engineering.</p><pclass="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p><imgclass="coding animated fadeInDown"src="PICTURES1/coding.png"style="width:150px;height:150px;"></body>

Solution 3:

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;

Html5 Tutorial

Why Is There Blank Space To The Right Of My Website?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Why Is There Blank Space To The Right Of My Website?"