Universal Borders and *{ Selector Breaking My Page's CSS When Removed


#1


Making a Website - Project:Move
https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move

I used the *{ selector to place 1px solid borders around all HTML elements so I could see where all my elements and containers sat within the page while working thru the steps of completing this project. I completed the 5 steps, and the website now looks & functions identically to the design prompt.

As a final step before continuing to the next project, I removed the universal borders to see the finished page, and this seems to be causing some error. Once the border is removed, my second and third background images both move downwards by approx. 200-300px, leaving new whitespace above in both cases. This happens the same whether the *{ selector is deleted or commented out, and when the universal borders are added back in, the images return to their proper places.

The first (top) background image is not affected in any way. Attempts to apply a quick-fix using negative margin-top values for the two affected images makes no change to their position. Tried using Margin:0; for the images, but this also makes no change.

I'm pretty stumped on this one - really hoping someone can point out what I'm missing.

Pls see code below. The images that are affected can be found in the .feature{ and .footer{ sections


/* CSS  */
*{
  border:1px solid blue;
}

html, body {
  margin: 0;
}

h1, h2 {
  color:#ffffff;
  font-family: 'Oswald', sans-serif;
  text-align:center;
  margin: 0;
}

body div div a {
  text-decoration:none;
  color:#fff;
    font-size:20px; 
  font-family: 'Oswald', sans-serif;
  background: #1c1c1c;
  width:120px;
  height:40px;
  padding: 10px 20px 0px 20px;
  text-align:center;
  display:block;
  margin:20px auto;
    text-transform:uppercase;
  text-decoration:none;
}

body div div a:hover {
  text-decoration:none;
  color:black;
    font-size:20px; 
  font-family: 'Oswald', sans-serif;
  background: #ffa800;
  width:120px;
  height:40px;
  padding: 10px 20px 0px 20px;
  text-align:center;
  display:block;
  margin:20px auto;
    text-transform:uppercase;
  text-decoration:none;
}

}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

.space{
  height:100px;
}

.container {
  width: 940px;
  margin: 0 auto;
}

/* Main */
.main {
  background: URL(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
  height: 600px;
}

.main h1 {
  font-size: 150px;
}

.main p {
  font-size: 18px;
}


/* Supporting */
.supporting {
  background:#1c1c1c;
  text-align: center;
  padding: 50px 0 80px;
}

.supporting .col {
  float: left;
  width: 28%;
  padding: 10px;
  display:inline-block;
  margin-left: 5px;
  margin-right:5px;
}

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 40px;
  margin-bottom: 10px;
  text-transform:uppercase;
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  font-family: Verdana, sans-serif;
  font-size:25px;
  margin-bottom: 20px;
  font-weight:20;
  line-height: 20px;
  font-size: 12px;
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

.supporting .btn:hover {
  background-color: #ffa800;
  color: black;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

/* Feature */
.feature {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
  background-size:cover;
    height: 600px;
}

.feature h1,
.feature h2 {
  color: #fff;
  text-align:center;
  font-size: 70px;
  margin-top: 200px;
  padding:50px 0 0;
}

/* Footer */
.footer {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg) no-repeat center center;
  height: 600px;
  margin-top:-200;
}

.footer h1,
.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 200px 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}

.footer a{
  text-decoration:none;
  color:#fff;
    font-size:20px; 
  font-family: 'Oswald', sans-serif;
  background: #1c1c1c;
  width:120px;
  height:40px;
  padding: 10px 20px 0px 20px;
  text-align:center;
  display:block;
  margin:20px auto;
    text-transform:uppercase;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:none;
  color:black;
    font-size:20px; 
  font-family: 'Oswald', sans-serif;
  background: #ffa800;
  width:120px;
  height:40px;
  padding: 10px 20px 0px 20px;
  text-align:center;
  display:block;
  margin:20px auto;
    text-transform:uppercase;
  text-decoration:none;

@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}
/* END CSS */

<!-- HTML -->
<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="main">
      <div class="container">
        <div class="space"></div>
        <h1>MOVE</h1>
        <h2>Form healthy habits to take your fitness to the next level.</h2>
        <a href="https://s3.amazonaws.com/codecademy-content/projects/move/index.html">Start Now</a>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        
        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        
        <div class="col">
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends.</p>
        </div>
                       
        <div class="clearfix"></div>
      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h1>MOVE. REST. RECOVER. MOVE.</h1>
      </div>
    </div>
    <div class="supporting">
      <h1>GO PREMIUM</h1>
      <p>Receive recommendations based on your activity to level up.</p>
      <a href="https://s3.amazonaws.com/codecademy-content/projects/move/index.html#" class="btn">LEARN MORE</a>
    </div>
    <div class="footer">
      <h1>STOP SCROLLING. START MOVING.</h1>
      <a href="https://s3.amazonaws.com/codecademy-content/projects/move/index.html#">START NOW</a>
    </div>
    
  </body>
</html>
<!-- END HTML -->


#2

@divine_inspiration,
You wanted to create

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <style>
      html, body {
        margin: 0;
      }

      h1, h2, a {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
      }

      p {
        font-family: Helvetica, Arial, sans-serif; 
      }

      .container {
        max-width: 940px;
        margin: 0 auto;
      }

      /* Main */
      .main {
        text-align: center;
        background: url(bg.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
      }

      .main .container {
        position: relative;
        top: 100px;
      }

      .main h1 {
        color: #fff;
        margin: 0;
        font-size: 150px;
      }

      .main p {
        color: #fff;
        margin: 0 0 20px 0;
        font-size: 18px;
      }

      .main .btn {
        background-color: #1c1c1c;
        color: #fff;
        font-size: 18px;
        padding: 8px 30px;
        text-decoration: none;
        display: inline-block;
      }

      /* Supporting */
      .supporting {
        background-color: #1c1c1c;
        text-align: center;
        padding: 50px 0 80px;
      }

      .supporting .col {
        float: left;
        width: 28%;
        padding: 10px;
      }

      .supporting h2 {
        color: #ffa800;
        font-size: 20px;
        margin-bottom: 10px;
      }

      .clearfix {
        clear: both;
      }

      .supporting p {
        color: #efefef;
        margin-bottom: 20px;
        line-height: 20px;
        font-size: 12px;
      }

      .supporting .btn {
        background-color: #eee;
        color: #1c1c1c;
        font-size: 18px;
        padding: 8px 30px;
        text-decoration: none;
        display: inline-block;
      }

      /* Feature */
      .feature {
        background: url(feature.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
        text-align: center;
      }

      .feature .container {
        position: relative;
        top: 200px;
      }

      .feature h2 {
        color: #fff;
        font-size: 40px;
        margin:0;
        padding:50px 0 0;

      }

      /* Footer */
      .footer {
        background: url(footer.jpg) no-repeat center center;
        background-size: cover;
        height: 600px;
        text-align: center;
      }

      .footer .container {
        position: relative;
        top: 200px;
      }

      .footer h2 {
        color: #fff;
        font-size: 40px;
        margin: 0 0 20px 0;
        padding:50px 0 0;
      }

      .footer p {
        color: #fff;
        margin: 0 0 20px 0;
        font-size: 18px;
      }

      .footer .btn {
        background-color: #1c1c1c;
        color: #fff;
        font-size: 18px;
        padding: 8px 30px;
        text-decoration: none;
        display: inline-block;
      }

      a.btn:hover {
        background:#ffa800;
        color:#000;
      }

      @media (min-width:600px) {
        .main h1 {
          font-size: 200px;
        }

        .supporting .col {
          width: 30%;
        }

        .supporting h2 {
          font-size: 40px;
        }

        .supporting p {
          font-size: 14px;
        }

        .feature h2 {
          font-size: 60px;
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to the next level.</p>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        <div class="col">
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends.</p>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h2>Move. Rest. Recover. Move.</h2>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>Go Premium</h2>
        <p>Receive recommendations based on your activity to level up.</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h2>Stop scrolling. Start moving</h2>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>
  </body>
</html>