Blank space in The Innovation Cloud Project


#1

Hello guys,

I don't know where to find and how to fix the blank space between my header and my navigation bar.
Could you help me please? Thank you!

Here is the code of my CSS:

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

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


/* Header */
.header {
  height: 800px;
  color: #FFF;
  text-align: center;
  background: url(https://images.unsplash.com/photo-1440635592348-167b1b30296f?crop=entropy&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1600);
  background-size: cover;
  
}

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

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0;
	margin-bottom: 80px;
  text-transform: uppercase;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

.header p {
	font-weight: 500;
	letter-spacing: 8px;
	margin-bottom: 40px;
	margin-top: 0;
  text-transform: uppercase;
}

.btn {
  border: 1px solid gray;
  background-color: #333;
  color: #FFF;
  text-decoration: none;
  padding: 10px 40px;
}

.btn:hover {
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
}


/* Nav */
.nav {
  background-color: black;
}

.nav ul {
	list-style: none;
	margin: 0 auto; 
	padding: 30px 0;
  margin: 80px auto;
}

.nav ul li {
  display: inline-block;
  color: white;
  padding: 0px 10px;
  
}


/* Main */
.main img {
  height: 200px;
  width: 200px;
  float: left;
  padding: 0px 75px 0px 0px;
  
}

.main .container {
	margin: 80px auto;
}

.main h2 {
  position: ; 
}


/* Jumbotron */
.jumbotron {
	height: 600px; 
	text-align: right;
}

.jumbotron .container {
	position: relative;
	top: 220px;
}


/* Footer */
.footer { 
	font-size: 14px;
}

/* Media Queries */
@media (max-width: 500px) {
  .header h1 {
    font-size: 50px;
    line-height: 64px;
  }

  .main, .jumbotron {
    padding: 0 30px;
  }

  .main img {
    width: 100%;
  }
}

#2

Could you also post your html code?


#3

Of course. Here you go:

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <h1>Innovation Cloud</h1>
        <p>Connect your ideas globally</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li>Register</li>
          <li>Schedule</li>
          <li>Sponsors</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg"/>
        

        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

    
  </body>
</html>

#4

Give me a minute, in the meantime, there is this post which teaches you how to make code visible on the forum, might be useful :slightly_smiling:


#5

:grin: Thank you buddy.


#6

It seems the unordered list inside your nav has a huge margin-top and bottom:

I found the perpetrator:

.nav ul {
list-style: none;
margin: 0 auto;
padding: 30px 0;
margin: 80px auto;
}

the margin causes the gap, remove the margin, or change the value to something more suitable.


#7

Problem solved!
Thank you very much!