Banner DIV is not moving down

Question

I've been trying to move down my banner div (.banner) and have no idea what I'm doing wrong. I've tried padding-bottom,padding-top and margins I'm not sure what is getting in the way of me being able to move it down. I've also tried to move my nav down to see if that is the problem but the banner still wont move down.

Image of what I'm trying to do:

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: #gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: gray; width: 100%; height: 400px; padding-bottom: 15px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

Answer 1

I ran your code snippet and added margin-top: 100px to the .banner element which successfully pushed the content down. Did you try this?

Perhaps you could make a live link for a us to preview the issue in case there is something else interfering?

Answer 2

Use margin-top to create distance above a DIV:

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: #gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: gray; width: 100%; height: 400px; padding-bottom: 15px; margin-top: 50px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

Answer 3

Problem

Are you sure, you did use the margin-top property?

Solving

Just replace the .banner padding for the margin-top property.

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: red; width: 100%; height: 400px; margin-top: 150px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

Useful links

• Shay Howe teaches the box model (Width, padding, margin, etc...).