Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by ibrahim Warsame
ibrahim Warsame
7,803 Points

Can't add any top or bottom badding to the h1 element in my site.

Can not add any top or bottom padding to my <h1>King Ibrahim</h1> element. here is my code.

<!DOCTYPE html>
<html>
    <head>
    <title> Test | Site</title>
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }
      #wrapper {
        width: 80%;
        margin: auto;
      }

      #calc-height {
       min-height: calc(100vh - 150px);
      }

      header {
        background-color: #54BCD8;
        color: white;
        text-align: center;
      }

      .logo,
      .main-nav li,
      .main-nav a {
        display: inline;
        color: white;
        text-decoration: none;
      }

      .main-nav li {
        margin-right: 15px;
        font-weight: bold;
      }

      .main-nav {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #4CA2BA;
      }

      footer {
        margin: auto;
        text-align: center;
        background-color: grey;
        padding: 30px 0;
      }
      h2 {
        margin: 50px 0 10px 0;
        color: grey;
      }
    </style>
  </head>
    <body>
    <div id="calc-height">
    <header>
      <h1 class="logo" style="font-family: 'Quicksand', sans-serif;">KING ibrahim</h1>
      <nav>
        <ul class="main-nav">
          <li><a href="#index">HOME</a></li>
          <li><a href="#index">ABOUT</a></li>
          <li><a href="#index">CONTACT</a></li>
       </ul>
     </nav>
  </header>
   <div id="wrapper">

    <section>
      <h2>The king</h2>
      <p>**Moderator redacted for content.**</p>
      <p>**Moderator redacted for content.**</p>
    </section>
    <section>
      <h2>Requirments to serve the king</h2>
      <p>If you are going to serve the strong king Ibrahim with the huge<br> muscles then you need to by uppforont and try hard for the auditions <br>man. </p>
      <p>**Moderator redacted for content.**</p>
    </section>
</div>
</div>
  <footer>
      <p>   &copy; Empire of king Ibrahim</p>
  </footer>
    </body>
</html>

Moderator edited: Removal of content that contains abusive language.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi Ibrahim! I have removed some of the content of your code from the forums so that it falls in line with the Community standards. :sparkles:

ibrahim Warsame
ibrahim Warsame
7,803 Points

Sory for the content, i was not thinking right when i wrote it :)

1 Answer

Samantha Blinde
Samantha Blinde
8,485 Points
Samantha Blinde
Samantha Blinde
8,485 Points

Hi there! I'm not seeing that your code has padding or margin on the h1 element at all. I see .logo (the class you have on the h1 element) with the following: 

.logo,
.main-nav li,
.main-nav a {
  display: inline;
  color: white;
  text-decoration: none;
}

Where are you adding the padding or margin to the h1 element exactly? Or where have you attempted to add it?

ibrahim Warsame
ibrahim Warsame
7,803 Points

Some times i think that im dum.

Samantha Blinde
Samantha Blinde
8,485 Points

Not dumb at all! CSS is tricky, and sometimes it's easy to make a mistake.

If I were working on this project, I would add a new line and add the following:

.logo {
/* First value is top and bottom padding, second value is left and right padding*/
padding: 10px 0;
}

I wouldn't add the padding to the current .logo, .main-nav li, .main-nav a I copied and pasted in my comment, unless you intended to add that same padding to the .main-nav li and .main-nav a elements. Because if you add any padding there, it'll apply to those elements as well and that may not be as you intend.

Good luck!

Josia Olivo Castillo
Josia Olivo Castillo
4,173 Points

I notice it's that you might be using the wrong one. Here it's your code. h2 { margin: 50px 0 10px 0; color: grey; }

it should be H1 h1 { margin: 50px 0 10px 0; color: grey; }