Profile Image stuck at top-right of page when adding display: block;

Question

Hi guys, glad to be here and have my first question.

I'm currently working through the 'How to Make a Website' series and have come undone at the 'Style New Pages' section.

My problem is that whenever I add a block value to the display property it forces the image into the upper right of the page. See css below:

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

Now I can take "display: block;" out and the image appears under the header/nav as opposed to to the top-right of it, which is great, but the problem is it still sits in the default left position and needs centering. I could find a means of centering it without display: block; but I don't want to shoot myself in the foot. I believe I've followed along with the tutorial/lessons down to a tee, so this has stumped me.

Hopefully I'm explaining it right - supernoob with only a days experience and all that

I've attached the full css markup below for further reference.

GENERAL
************************************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;  
}



/************************************************
HEADING
************************************************/

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

#logo {
  text-align: center;
  margin: 0;
}


h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;  
}



/************************************************
NAVIGATION
************************************************/

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



/************************************************
FOOTER
************************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



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

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size 0.75em;
  color: #bdc3c7;
}


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

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



/************************************************
COLOURS
************************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav links */
nav a.selected, nav a:hover {
  color: #32673f;
}```

Answer 1 · 2014-06-07T16:32:20Z

June 7, 2014 4:32pm

The fix for this is actually in the teachers notes.

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

Answer 2 · 2014-06-07T16:05:40Z

June 7, 2014 4:05pm

In Firefox for me the image wouldn't show until I set display: inline-block; but it wasn't centered. You can try some of the solutions here for that if you like.

Answer 3 · 2014-06-07T15:29:06Z

June 7, 2014 3:29pm

Can you add your HTML for the about.html page? Also: wrap your css code in the 3 backtick characters. 3 on each side of your code. This will make it easier to read and understand :)

Answer 4 · 2014-06-07T15:38:42Z

June 7, 2014 3:38pm

I'm not seeing an issue with your recent update. Before there were several missing # symbols. The only thing I'm able to notice is a missing colon from one of your code blocks but I don't think that is the issue.

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em; /* added colon to font-size */
  color: #bdc3c7;
}

Answer 5 · 2014-06-07T15:33:17Z

June 7, 2014 3:33pm

Hi, think I've fixed it so its easier to follow and below is (or should be) the html for about.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Christopher Mason | Website Design and Development</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Christopher Mason</h1>
        <h2>Website Design and Development</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/images.jpg" alt="Photograph of funny dude." class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Christopher Mason! This is my design portfolio where I share all of my favourite work. When I'm not designing things, I enjoy playing video games, watching Breaking Bad, writing generic About Us pages, and more.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com">@FakeTwitter</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 and beyond Christopher Mason.</p>
      </footer>
    </div>
  </body>
</html>

Answer 6 · 2014-06-07T15:48:44Z

June 7, 2014 3:48pm

Thanks Dustin. I think in the process of pasting the code it didn't paste over correctly as I have the colon on my document.

Just an update. I thought I'd try the page in Chrome and Opera (Firefox) is my preference, and in both browsers it loads fine.

If one of you could try http://web-fu35zpn1st.treehouse-app.com/about.html on your Firefox and let me know whether it loads on yours or not that would be great. It may well be that my Firefox has some crap installed on it which is interfering with the page?

Chris

Answer 7 · 2014-06-07T15:48:54Z

June 7, 2014 3:48pm

So I've loaded both your HTML and CSS onto my own computer, and in Chrome at least, the image appears right in the center. With and without normalize. Everything is as should be.

The only ideas I have are that you could inspect element in Chrome or Firefox, and maybe you'll see the specific issue. Good luck.

Welcome to the Treehouse Community

Looking to learn something new?

Chris Mason

Chris Mason

Profile Image stuck at top-right of page when adding display: block;

7 Answers

Dustin Matlock

Dustin Matlock

Chris Mason

Chris Mason

Dustin Matlock

Dustin Matlock

Dustin Matlock

Dustin Matlock

Chris Mason

Chris Mason

notf0und

notf0und

Dustin Matlock

Dustin Matlock

Chris Mason

Chris Mason

Chris Mason

Chris Mason

notf0und

notf0und

notf0und

notf0und