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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

<nav> isn't moving to the right

Hi everyone,

I came across a problem that I cannot solve on my own that's why I would like to ask you for your help.

The media query for screens over 660px doesn't seem to take affect when I widen the browser window.

On the initial test with the background color it worked but now when I added the nav styling from Nicks video, the <nav> just sits in the middle and is not moved to the right.

Any ideas?

My code:

@media screen and (min-width: 660px) {
  /***************************
    HEADER
   ***************************/
  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

Thank you for helping.

6 Answers

Julius Gehrig
Julius Gehrig
16,110 Points
Julius Gehrig
Julius Gehrig
16,110 Points

I think this might be because you forgot the closing curly bracket for the media query

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Nejc,

This may be to do with the following:

margin-right: 5%;
width: 45%;

Can you try removing these from the nav style please to see if this has made any difference? If it doesn't fix the issue it will at least allow you to identify the issue.

Thanks

-Rich

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi guys,

That was the quickest answer ever.

The curly braces are complete (missed the last curly @cpy/pst. ".nav" isn't going to help because the <nav> has no class. And when I remove the margin-right and width no change.

A I'm missing something, 'cos I've checked the code for the 10nth time now and I can't seem to find the problem.

The HTML code: ´´´html

  <nav>
    <ul>
      <li><a href="index.html" >Portfolio</a></li>
      <li><a href="about.html" >About</a></li>
      <li><a href="contact.html" class="selected">Contact</a></li>
    </ul>
  </nav>

´´´

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: 700;
  padding: 15px 10px;
}

The stylesheet is included in the .html file: did a test if it's included correctly and it worked with the simple background change test.

Rich Bagley
Rich Bagley
25,869 Points

Hi Nejc,

Can you include the HTML nav section you're attempting to alter please?

Thanks

-Rich

Zoltán Békési
Zoltán Békési
9,713 Points
Zoltán Békési
Zoltán Békési
9,713 Points

Hi!

Did you linked that css file in the html head section?

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Found the problem:

Typo from the first media query: I accidentally added a "}" on the end of it.

And that's why it didn't take the second query.

Thanks though for all the help.

Regards :)

Elias Adams
Elias Adams
4,263 Points
Elias Adams
Elias Adams
4,263 Points

Just a Test: 

            <p>This is code!</p>
            ```