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 Fadli Hidayatullah
Fadli Hidayatullah
2,691 Points

There's a bug in header position, how to fix it?

This is my HTML code 

<div id="wrapper">
      <section>
        <img src="img/fadli.jpg" alt="Photograph of Fadli" class="profile-photo">
        <h3>About</h3>
        <p>
          My name is Fadli Hidayatullah, I’m a web developer
and web designer. I start my career at 2016.
I have created many kinds of web sites
and web applications. When I’m not designing or
building things, I enjoy reading, thinking and
learning some new things.
        </p>

        <p>
          If you’d like to follow me on Twitter,
don’t bother to do it, username <a href="http://twitter.com/herocode27">@herocode27</a>.
        </p>
      </section>

And this is my CSS code

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

When i moved to the about page or contact page, it will push a little bit space the header inside of header to the right.

And i'd like to ask one more question that why we should use float on the header instead of nothing. When i do not using float, the result was same.

header {
  float: left;
  width: 100%;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
}

Thank you,