Why does the content overflow the viewport when doing horizontal and vertical scroll?

Question

I do not understand why my HTML content is overflowing the viewport both vertically and horizontally. I can scroll in both directions, even though there is no extra content. I have tried changing the width and height on the div of the parents, but that does not fix the problem. Here is my code:

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  text-align: center;
}

h1 {
  padding-top: 200px;
  font-family: 'Rubik Microbe', cursive;
  font-weight: normal;
  font-size: 200px;
}

p {
  font-family: 'Megrim', cursive;
  font-size: 50px;
}


  
  
  
  SITE
  
  
  
  
  
  
  



  
    SITE
    coming soon...

Any ideas?

user_18595321 · Answer

The main problem is padding-top: 200px; on the h1 element. It is not necessary to position elements by using high values of padding or margin, for example.

So, I took off the padding from h1 and added flexbox attributes to body and your layout works with the h1 and p elements now centered in the page.

display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;

height: 100vh; sets the height of the body to the viewport height.

Here, you can find a lot of links to flexbox, in particular the link to A Complete Guide to Flexbox should be of interest.

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  text-align: center;
  display:flex;
  flex-direction:column;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-family: 'Rubik Microbe', cursive;
  font-weight: normal;
  font-size: 200px;
}

p {
  font-family: 'Megrim', cursive;
  font-size: 50px;
}


  
  
  
  SITE
  
  
  
  
  
  
  



  
    SITE
    coming soon...

user_19483778 · Answer

You can just try overflow: hidden in your body section styling.

body { overflow: hidden;}

Why does the content overflow the viewport when doing horizontal and vertical scroll?

2 Answers