Fiddle: <https://jsfiddle.net/sm6yvwmu/1/>

I'm trying to center my nav bar; however, my aside element keeps coming up in the same line as my nav bar. How can I fix this? 

Thanks in advance!

```css
#wrapper {
  width: 600px;
  margin: 0 auto;
}

#nav {
  width: 500px;
  margin: 0 auto;
  list-style-type: none;
  display: block;
}

#nav li {
  float: left;
}

#nav a {
  text-align: center;
  text-decoration: none;
  padding: 5px;
}

aside {
  float: left;
  padding: 5px;
  height: 200px;
  width: 100px;
  display: block;
}
```

```html
<header>Portfolio</header>

<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<aside>
  Michelle
</aside>
```