CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

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
203,995 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>

ahh thank you so much steven! it works now