Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Style New Pages

tylerduprey
seal-mask
.a{fill-rule:evenodd;}techdegree
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 Points

When I add "display: block;" to my image class, it causes the image to align to the right of my header/nav menu. Why?

When I add the Css: "display: block" to my .profile-photo class it cause the image to appear to the right of the header. When i remove the "display: block" line, it appears below the header but isn't centered on the page.

Any ideas what I'm doing wrong?

2 Answers

You probably need to use a clearfix.

clearfix {
content: "";
display: block;
clear: both;
}
tylerduprey
seal-mask
.a{fill-rule:evenodd;}techdegree
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 Points

I figured out that my header had a "float: left" line in the Css. When I commented this out, the image appeared underneath the header where it was supposed to be. I'm not sure how float: left got in there. I don't know whether the instructor had it in his code or not. Anyway, the problem is solved unless I needed that float left in there for something else.