Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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