Elizabeth,

I think I know what you are talking about with the 'White Boxes'.

It looks like it has to do with the padding on this line:

nav a { font-weight: 800; padding: 15px 10px; }

This is causing the a element to be slightly offset on the li element

Try to move that padding off of the a element and over to the nav li element with the parameters below:

nav li { display: inline-block; padding: 5px 10px 5px 10px}

I think this should solve your issue! Let me know.

What do you mean by not centered together?

When I copied your code, I added it to a page I'd already created and didn't see any box's behind the text. They were all in a row horizontally.

Let me know what you're looking for or copy more of your code and I'll try to help out.

I attached my entire CSS and the header part of my HTML. Maybe it has to do with the header? I can't seem to find any inconsistencies.

/******* General *******/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; } a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******* Heading *******/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: .75em; margin: -5px 0 0; font-weight: normal; } /******* Navigation *******/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******* Footer *******/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc;
}

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/******* page: portfolio *******/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: bdc3c7; }

gallery li a p{

margin: 0; padding: 5%; font-size: 0.75 em; color: #bdc3c7; }

/******* page: about *******/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******* Colors *******/

body{ background-color: #fff; color: #999; }

header { background: #6ab47b; border-color: #599a68; }

nav { background: #599a68; }

h1, h2 { color: #fff; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

<header>
  <a href="index.html" id="logo">
    <h1>Elizabeth Stellato</h1>
    <h2>Web Developer</h2>
  </a>
  <nav>
    <ul id="gallery">
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html"> About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

When I upload that, it looks great. I don't use workspaces, but I'll try it in there.

Your name and web developer are in the main bar aligned to the left and the nav bar is centered below that. Is that the look you're going for?

Here's my link to the workspace...not sure if it will work.

http://web-68lpcgsavo.treehouse-app.com/