0

.banner{
  background-color: #7fffd4;
  color: white;
  font-family: Apple Chancery, cursive;
  margin: 0;
  padding: .1%;
  width: 100%;
  font-size: 14px;
}

body{
  margin: 0;
}

.container {
   position: relative;
}
.rect{
    width:100%;
    height:599px;
    position: absolute;
    margin: 0;
    background:#aa7fff;

}

.left{
  width: 25%;
  padding-left: 2%;
  font-family: Apple Chancery, cursive;
  color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>EmeryForAmerica</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <div class="banner">
    <h1>
        <center>""</center>
    </h1>
  </div>

  <div class="rect">
    <div class="left">
      <h1> "America has problems, and in order to solve those problems, we need to make America not have problems anymore..."</h1>
      <br>
      <h2> -Emery</h2>
    </div>
  </div>



  </div>
  <div class="container">
    <center><img src="EliBinky.jpg" height="full" width="full"></center>
  </div>
  </div>



</body>

</html>

I know it looks awful, and the image is missing, however, answers such as "Removing white bar from top of page" suggest making the margin and padding 0. If I do this on the banner, it adds the white bars back. Currently, the bars are gone because there is padding (even .1%) which removes the bars. This solution is not viable because I need 0 padding for the integrity of the rest of the page. Please help.

0 Answers0