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

CSS

Posted by Phil Starr
Phil Starr
3,149 Points

I am trying to get my nav to the bottom of the header but still central. help required thanks

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALSTARR75</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="welcome" class="wrapper">
    <header class="main-header">
  <div>
      <h1 class="name">ALSTARR75</h1>
  </div>
    <div class="nav">
      <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>

   </header>

.main-header {
  height: 100vh;
  border-bottom: 1px solid #e00040;
  margin: 0 auto 30px;
  background: linear-gradient(#191c1f, transparent 70%),
    linear-gradient(0deg, #191c1f, transparent 50%),
    url('../img/Nu-Gen.jpg') no-repeat center;
}

.name {
  width: 100%;
  font-size: 3em;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding-top: 20px;

}

.nav {
 text-align: center;
}

.nav li {
  display: inline-block;
  margin: 0 20px;
  background-color: #191c1f;
  width: 20%;
  border: 1px solid #e00040;
}

.nav li a {
  display: inline-block;
  padding: 5px 0;
}
Ashish Mehra
Ashish Mehra
Courses Plus Student 589 Points

i think u forget to write closing tag of header

2 Answers

Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points
Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points

Try to give your header a** positon: relative; ** then give your** .nav{ position:absolute; width: 100%; bottom: 10px;(don't have to be 10px).**

Phil Starr
Phil Starr
3,149 Points
Phil Starr
Phil Starr
3,149 Points

thanks all

got it working, so I made the .main-header position relative then made my .nav position absolute and bottom setting 10px.

P