Hi Matthew, can you copy your paste so we can take a look at what the issue might be?

Copy and paste the code, then wrap everything in three backticks.

For example

<h1>Hi Matthew </h1>

Watch the Tips for asking questions if you are stuck on the specific keyboard key I mean, it's to the right -------->

Sure. Here is the entire main.css:

/************************************ General /************************************/

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

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

/li { list-style:none;/ }

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: 'PT Sans Narrow', 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:700; padding: 15px 10px; }

/************************************ Footer /************************************/

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

.social-icons { 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-type: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; }

.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.png');

}

/************************************ Colors /************************************/

/* 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; }

/* color for a nav link */

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

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

I'm using the Chrome browser and firefox on both mac and windows. Also, I don't know if that paste came out correctly. I meant to comment out the li selector in the general section.

Try this:

.contact-info li a { 

    display:block; 
    min-height: 20px; 
    background-repeat:no-repeat; 
    background-size: 20px 20px; 
    padding: 0 0 0 30px; 

}

I just tried it with no change.

I went back and got the code from my workspace for you from when I did this course. This worked for me, it might help you find the exact issue.

.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.png');
}

Thank you so much, but that didn't work either. I'm thinking there must be some overriding default in a parent container or something. But my code is exactly like Nick's so I don't understand how it could work for him -and you- but not me. I know it's not my computer, platform or browser (unless a different version) because I've tried on two different computers, one a mac and one a windows, with two different browsers. I've also tested by trying to add color to the text in the "Page CONTACT" section of my main.css and the text won't change colors either.

Hello folks. I'm here to say that I have the same issue. Everything was hunky-dory until it came time to display the little pictures next to the telephone number, email and twitter contact links. I have the same issue that the bullet points are stubbornly refusing to become pictures.

I just had the same problem and I got to make it work. It would be important to add as a comment in the video section for students that may do the same mistake. I watch the videos and take annotations in a notebook, thus trying to memorize most of what Nick says and then work on the code by myself.

When I wrote the code in the correct order as how the final CSS code should look like, I had the same problem. So I thought a little bit about what may have happened. First, I just wrote:

.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.png');
}

But as nothing happened I erased the contact info styling:

.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;
}

And left:

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

.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.png');
}

At that point I saved my main.css file and checked the website to see the changes. The images were uploaded but there was no formatting. I'm guessing that due to CSS's cascading nature, one must first specify and upload the images and then apply the styling but only before our list item's background image lines of code are written in workspaces.

When I added the final styling lines of code, everything ran perfectly. Hope this helped.

Using google chrome , I couldnt get the bullet points to dissapear nor the pictures to appear. Using internet explorer however,fixed the issue.