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 CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Posted by Bomi Kim
Bomi Kim
8,006 Points

header not showing in the same line, margin 0 doesn't work

I've been trying to make a header with a navigation bar but all the elements are not expanding throughout the screen, and the margin property I typed isn't working for some reason.

Could anyone review my css file and see what i've missed? I've also attached my html file.

/* base element styles */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.8;
  color: #000;
  margin: 0;
}

p {
  font-size: .5em;
  margin-bottom: 2em;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/*base layout styles*/

/*navigation*/

.name {
  font-size: 1em;
  margin: 0;
  color: #0d0d0d;
}

.main-nav {
  margin-top: 5px;
}

.name a,
.main-nav a {
  text-align: center;
  display: block;
  margin-top: .5em;
  padding: 10px 15px;
  color: #000;
  width: 100%;
}

.main-nav a {
  font-size: .95em;
  color: #333;
}

.main-nav a:hover {
  color: #666;
}

/* ---- Layout Containers ---- */

.main-header {
  position: fixed;
  width: 100%;
  padding-top: .5em;
  padding-bottom: .1em;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}


/* ================================= 
  Media Queries
==================================== */
@media (min-width: 769px) {

  .name {
    float: left;
  }

  .main-nav {
    float: right;
  }

  .main-nav li {
    display: inline-block;
    margin-left: 20px;
  }


  /* ---- Float clearfix ---- */

  .clearfix::after {
    content: " ";
    display: table;
    clear: both;
  }

}

HTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">

  <title>Portfolio Page</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <!-- Font Awesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--default font-->
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">

</head>


<body>

  <header class="main-header">
    <div class="container clearfix">
         <h1 class="name"><a href="#">Portfolio</li>
           <ul class ="main-nav" style="list-style: none">
             <li><a href="#intro">Home</a></li>
             <li><a href="#education">Education</a></li>
             <li><a href="#skillset">Skillset</a></li>
             <li><a href="#experience">Experience</a></li>
             <li><a href="#contact">Contact</a></li>
           </ul>
      </div>
  </header>

  <!-- main header -->

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You have some syntax issues (mismatched tags) on this line:

         <h1 class="name"><a href="#">Portfolio</li>

There's no end tag for either the anchor ("a") element or the heading ("h1") element, and there's a stray end tag for a list item ("li") that was never started. You probably want this instead:

         <h1 class="name"><a href="#">Portfolio</a></h1>
Bomi Kim
Bomi Kim
8,006 Points

ahh thank you so much steven! it works now