There is unnecessary white space in the middle of website


#1


https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bolt-network


There is unnecessary white space in the middle of a website.
Rest of them is a disaster but this is the biggest problem right now.

HTML

 <body>

<div class="jumbotron">
  <div class="container">
   <div class="header">
    <div class="row">
     <div class="col-md-2">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg" width="180" height="34">
    </div>
    <div class="pull-right">
     <ul>
      <li>Log in</li> 
       <a href="#" class="btn btn-default">Sign up</a>
    </ul>
   </div>
  </div>
</div>

<div class="main">
 <h1>Watch your favorite movies, instantly.</h1>
  <a href="#" class="btn btn-default">Learn more</a>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="text" class="form-control" id="search" placeholder="Browse the collection"/>
           <button type="submit" class="btn btn-submit">Search</button>
       </div>  
    </form>
  </div>
 </div>
</div>

<div class="supporting">
  <div class="container">
   <h2>A world of movie at your fingertips</h2>
     <p>Choose from the latest titles, with new movies added every day.</p>

CSS

html, body {
  font-family: "Oxygen", sans-serif; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
}

.container {
  max-width: 970px;
}

.jumbotron {
  background-color:#000000;
  height:600px;
  color:inherit;
  margin-bottom:30px;
  padding:30px;
}

.header {
  color:#FFFFFF;
}

.row {
  margin-left:-15px;
  margin-right:-15px;
}

.pull-right {
  float:right !important;
}

.header ul {
  list-style:none;
}

.header li {
  display:inline;
  margin-right:30px;
  color:#0393FF;
}

.jumbotron .btn {
  background:transparent;
  border:1px solid #0393FF;
  border-radius:2px;
  color:#0393FF;
  padding:8px 20px;
}

.jumbotron h1 {
  color:#FFFFFF;
  font-weight:300;
  margin-bottom:40px;
  margin-top:80px;
}

form {
  margin-top:80px;
}

.form-group {
  margin-bottom:15px;
}

.supporting {
  padding-bottom:80px;
  background:#161616;
}

.supporting h2, .feature h1 {
  color:#0393FF;
  font-size:32px;
  font-weight:300;
  margin-bottom:10px;
  margin-top:60px;
}

.supporting p {
  font-size:16px;
  margin-bottom:45px;
}

.main, .supporting h2, .supporting p, .feature {
  color:#FFFFFF;
  text-align:center;
}

Thanks in advance.


#2

just add margin-top: -30px; to .supporting class

  .supporting {
   padding-bottom:80px;
   background:#161616;
   margin-top:-30px;

 }

#3

@rcodeman Thanks a lot! :mouse:


#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.