So I'm still fairly new at about 2 months experience. However, I have a bad habit of jumping to the next topic without practicing just assuming I'll retain it, leading to me either forgetting or struggling when I try to start a project. So I'm trying to break this habit so I can master it and this brings me to my question. I'm having trouble with my sticky nav "sticking".

HTML

```
    <div class="header">
    <div class = "intro">
      <h2 class = "introduction">Hello, I'm <br></h2>
    </div>
</div>

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
</div>

```

CSS

```
body{
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  background-color: #393c42;
}
.container {
  margin: auto;
   max-width: 900px;
}

.header{
  min-height: 900px;
  background-color: #393c42;
  padding: 0;
  margin: 0;
}

.intro {
}

.introduction {
  font-size: 50px;
  text-align: center;
  padding-top: 400px;
  font-family: 'Permanent Marker',sans-serif;
  color: #6bd3e5;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #6bd3e5;
}

h2 {
  padding: 0;
  margin: 0;
}

.projectSquares {
  width: 40%;
  background: #333;
  padding-bottom: 30%;
  float:left;
   margin: 1%;
}

```

Basically I'm trying to use the position: sticky but it has stopped working. Seemed to quit working after I put all the .projectSquares divs in but I can't see how. I think something is conflicting with it but I can't figure it out. Any help would be greatly appreciated and I apologize if my code doesn't make any sense.

Also if there is a simpler way to get the banner image/ sticky nav underneath effect going any pointers would be great.