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

Posted by Jessica Donley
Jessica Donley
3,967 Points

My main-nav does not look the same as Guil's.

I believe I followed him code for code, however, at the final step of the video "Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding", the links/ buttons are very wide and don't perform as his are. Could somebody help me look over my code? I tried inspecting it with dev tools and saw that obviously the width and height are too long, but I don't know what's causing that. Thanks in advance.

/* ================================= 
  Base Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.5em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
}

.name,
.main-nav li {
    text-align:center;
    background: #fff;
    margin-top: 6px;
    margin-bottom: 6px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

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

.name a,
.main-nav a {
  padding: 10px 15px;
  display: block;

}


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

.container {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    text-align: center;
  padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

.main-footer {
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }

    .name;
    .main-nav li {
      display: inline-block;

}

    .name {
      width: 240px;

}



}

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

I ran your CSS through the W3C validator and it came up with a parse error at line 108 (inside your media query)

You have a semicolon instead of a comma after name

 .name;
 .main-nav li {
    display: inline-block;
}