Photo has no spacing (padding?) from top of page. Add iconography section doesn’t remove borders or apply icons

Question

Hi guys,

I’ve just noticed my photo isn’t displaying with any spacing from the top. I’m also stuck on the iconography section; I can’t seem to remove bullets or add icons. Any thoughts? This feels like a big ask considering the amount of code so I appreciate any help. Code below:

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

body { font-family: 'Work 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 0p; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Cabin', 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 10 px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight:600; 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%; }

/******************************************* PAGE: CONTACT *******************************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter-wrap.png'); }

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

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

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

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

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

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

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

/selected nav link/ nav a.selected, nav a:hover { color: #32673f; }

/******************************************* THIS IS MY HTML *******************************************/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mark J Winter</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic|Work+Sans:400,100,200,300,500,600,700,800|Yantramanav:400,100,300,700,900,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>MARK J WINTER</h1> <h2>Graphic Designer</h2> </a> <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> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>Text goes here</p> <p>Text goes here</p>

    <h3>Contact Details</h3>
    <ul class="contact-info"></ul>
    <li class="phone"><a href="tel:0000-000-0000">0000-000-0000</a></li>
    <li class="mail"><a href="mailto:markjwinter86@me.com">markjwinter86@me.com</a></li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=markjwinter86">@markjwinter86</a></li>
  </section>
  <section>
  </section>
  <footer>
    <a href="http://twitter.com/markjwinter86"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/mjw86design"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2016 Mark J Winter</p>
  </footer>
</div>
</body>

</html>

Answer 1 · 2016-03-05T21:21:07Z

March 5, 2016 9:21pm

I don't see any images in your HTML except the footer. And there are several parts of the CSS that look like they should be comments but they're not. Maybe things are missing that would show if you fix your blockquotes.

Remember to skip a line, then create a line with only 3 accents ("backticks") and the language, Then start your code on the next line. After your code, put another line with only 3 accents, like this:

```css

(your code goes here)

```

In the meantime, sometimes when spacing is not what you expect, it may be a case of margin collapse. When the margins of two elements overlap, by default the space is combined and only the larger of the two is shown. Check for this in case it's responsible for what you're seeing (or not seeing).

Answer 2 · 2016-03-06T10:40:19Z

March 6, 2016 10:40am

I'm sorry I've copied the wrong HTML across, I'm really struggling with this guys, please accept my apologies.

Ramone - What is Github? I've just signed up but its a little overwhelming.

Steven - I don't think we've covered 'margin collapse' yet, that doesn't sound familiar.

Answer 3 · 2016-03-06T10:41:06Z

March 6, 2016 10:41am

Correct HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mark J Winter</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic|Work+Sans:400,100,200,300,500,600,700,800|Yantramanav:400,100,300,700,900,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>MARK J WINTER</h1> <h2>Graphic Designer</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>This is my Graphic Design Portfolio<p> <p>You can find me on Twitter: <a href="http://twitter.com/markjwinter86">@MarkJWinter86</a>.</p> </section> <footer> <a href="http://twitter.com/markjwinter86"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mjw86design"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Mark J Winter</p> </footer> </div> </body> </html>

Welcome to the Treehouse Community

Looking to learn something new?

Unsubscribed User

Unsubscribed User

Photo has no spacing (padding?) from top of page. Add iconography section doesn’t remove borders or apply icons

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Ramone Adams

Ramone Adams

3 Answers

Steven Parker

Steven Parker

```css

(your code goes here)

```

Unsubscribed User

Unsubscribed User

Unsubscribed User

Unsubscribed User

Ramone Adams

Ramone Adams