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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Kolden Prue
Kolden Prue
7,689 Points
Posted by Kolden Prue
Kolden Prue
7,689 Points

#logo will not float left

I've managed to get the nav section to float to the right but the #logo portion will not float left . Here is my code

@media screen and (min-width: 480px) {

/********************************* TWO COLUMN LAYOUT **********************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/********************************* PAGE: PORTFOLIO **********************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/********************************* PAGE: ABOUT **********************************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

}

@media screen and (min-width: 660px) {

/* header */

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%;

}

Kolden Prue
Kolden Prue
7,689 Points
Kolden Prue
Kolden Prue
7,689 Points

I left the ending bracket for the second media query out in my code posting, but I have it in the text editor and the problem still remains

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

To facilitate analysis, it might help to make a snapshot of your workspace and post the link to it here.

And when posting code directly, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

4 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

The div itself is floated left, but it has a width of 45% and the heading elements inside it are aligned to its center (main.css, line 205).

Kolden Prue
Kolden Prue
7,689 Points
Kolden Prue
Kolden Prue
7,689 Points

Sorry about that. I'm still fairly new to tth . https://w.trhou.se/6q128p8xvy

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Those snapshots are very helpful for tracking down issues (and saving space in the question)!

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

When you look at the rendered page, do you see this "logo" element in the wrong place? Or is it not visible at all?

When I look in the HTML I don't see any element with an ID of "logo". The CSS appears to be good, but I would guess that this element still needs to be added to the HTML.

Kolden Prue
Kolden Prue
7,689 Points
Kolden Prue
Kolden Prue
7,689 Points

I couldn't find the element either. It appears I missed a step to include the "logo" element in my html. I've followed the directions in each video to a tee so this is odd.
I attempted to fix the issue in my html on the about.html page. this is the revised snapshot : https://w.trhou.se/xlzmbs2xoj Unfortunately the section is not flushing entirely left like in the video. Any recommendations?