White space around my website

Coding Help
,
#1

image
image1920×964 312 KB

If you look at the sides of the page, you’ll see some white space, as if I gave my website an outline. Why is this happening?

Full code below (because the website has some links for my private group)

html

<html lang="en">
  <head>
    <title>f o c u s</title>
    <link rel="stylesheet" href="../style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <!-- header with nav bar -->
      <div>
        <ul class="Headerul">
          <!-- these go backward because of the float:right -->
          <li class="Headerli"><a href="../learn.html">About</a></li>
          <li class="Headerli"><a href="#contact">Contact</a></li>
          <li class="Headerli"><a href="#news">News</a></li>
          <li class="Headerli"><a href="#home">Home</a></li>
        </ul>
      </div>
      <!-- heading -->
      <div
        style="background-image: url('https://cdn.glitch.com/8dcd60f5-e159-4b42-a8ec-6541453d821a%2Fhogwarts_is_my_home_by_melanieskyethunder_d4xcc7i-fullview.jpg?v=1611120789800');
              background-repeat: no-repeat;
              background-size: cover;
              background-size: * 100%;
              background-position: center;
              background-attachment: scroll;
              padding-top: 15%;
              padding-bottom: 15%"
      >
        <!-- title -->
        <h1 class="centre" style="font-size:100px;color:white">focus</h1>
        <p class="centre">
          <a href="https://google.com" id="hb">JOIN NOW!</a>
        </p>
      </div>

      <!-- introduction -->
      <div class="div1">
        <p class="centre">
          Welcome to the Study Group server! <br />
          Please enjoy your time here. <br />
        </p>
      </div>
      <div class="div2">
        <h3 class="centre">
          rules
        </h3>
      </div>
    <!-- footer -->
    <footer></footer>
  </body>
</html>

css

body {
  background-color: #f2f2f2;
}
.div1 {
  background-color: #f2f2f2;
  padding-top: 50px;
  padding-bottom: 50px;
}
.div2 {
  background-color: #dedede;
  padding-top: 50px;
  padding-bottom: 50px;
}
h1 {
  font-family: "Montserrat";
  color: #00ffbb;
  margin: 0;
  font-size: 4em;
}
h2 {
  font-family: "Montserrat";
  color: #00ffbb;
  margin: 0;
  font-size: 3em;
}
h3 {
  font-family: "Montserrat";
  color: black;
  margin: 0;
  font-size: 2.34em;
}
h4 {
  font-family: "Montserrat";
  color: black;
  margin: 0;
  font-size: 2em;
}
h5 {
  font-family: "Montserrat";
  color: black;
  margin: 0;
  font-size: 1.66em;
}
h6 {
  font-family: "Montserrat";
  color: black;
  margin: 0;
  font-size: 1.34em;
}
p {
  font-family: "Montserrat";
  color: black;
  margin: 0;
  font-size: 21px;
}
blockquote {
  font-family: "Montserrat";
  color: #575757;
  margin: 0;
}
div {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  margin: 0px;
}

/* centre class */
.centre {
  text-align: center;
}

/* button */
.button {
}

.button:link,
.button:visited {
  transition-duration: 0.5s;
  background-color: #00ffbb;
  color: black;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
}

.button:hover,
.button:active {
  transition-duration: 0.5s;
  background-color: #00f2b2;
}

/* header button */
#hb {
  transition-duration: 0.5s;

  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  
  border: 2px solid white;
  background: none;
  color: white;
}

#hb:hover {
  transition-duration: 0.5s;
  font-size: 23px;
}

/* links */
a:link {
  color: #009c72;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #009c72;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #00d197;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #00d197;
  background-color: transparent;
  text-decoration: none;
}

/* lists */
.Headerul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  background-color: #00ffbb;
}

.Headerli {
  float: right;
}

.Headerli a {
  font-family: Montserrat;
  display: block;
  color: black;
  text-align: center;
  padding: 1vw;
  padding-top: 2vw;
  padding-bottom: 2vw;
  text-decoration: none;
}

.Headerli a:hover {
  background-color: #00e8aa;
}
#2

Hi jeanenchanted,

Could be the “user-agent stylesheet”, that is, the CSS that browsers apply by default to all webpages. You can override it with CSS rules called a “reset”.

First, open the browser DevTools with F12 and use the tools to select the top level elements like your main div or the body tag. The tools have a little panel that lets you see all the paddings, margins, borders etc applied to an element. That should help you diagnose.

Then look into new rules to set the margins how you want them on body.

While I’m here, why not take all those inline styles on your main div, and put them in a CSS class instead? That’d be nice and tidy :slight_smile:

Hope it helps

3 Likes
#3

Thanks! This solved my problem by adding margin: 0 to my CSS file.