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 trialNejc 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
16,110 PointsI think this might be because you forgot the closing curly bracket for the media query
Rich Bagley
25,869 PointsHi 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
Full Stack JavaScript Techdegree Graduate 51,574 PointsHi 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
25,869 PointsHi Nejc,
Can you include the HTML nav section you're attempting to alter please?
Thanks
-Rich
Zoltán Békési
9,713 PointsHi!
Did you linked that css file in the html head section?
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsFound 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
4,263 PointsJust a Test:
<p>This is code!</p>
```