I see how the padding pushed the text to the right 30px, but why didn't it push the icons as well?

You are right Justin. You have added the images as a background so they are not part of your HTML.

If you really wanted to add padding to the background image you will need to do a hack and add a thick border on the side with the same colour as the background.

Hi Justin,

It may help to look at a diagram of the css box model: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

When you apply the 30px of left padding you're moving the content box 30px to the right. Since the text resides in the content box, it goes with it.

The position of background images is determined by the background-origin and background-position properties.

Since these properties were not specified in this project the browser will use the initial values:

background-origin: padding-box;
background-position: 0% 0%;

By default, the origin is the top left corner of the padding box. This is why the background image stays in the padding area.

If you were to add to your css:

.contact-info a {
  background-origin: content-box;
}

Then you should see the icons move to the content box area and be under the text again because now the origin is the top left corner of the content box.

Hello,

Maybe the icons are in position absolute or something? The text is with the same box if you know what i mean so it pushed 30px away and you may jus push only that div , that paragraph ( p ).

Paste your code so we can have look at it and know because its like impossible to tell you why things goes wrong if we don't know what you did.

paste the code in order to help!!!!

<section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-5454">555-5454</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

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

My guess is that since these images aren't actually in the html file, all the declarations under .contact-info a doesn't apply to these images (except for background-repeat and background-size), which can explain why the icons don't behave like the links (i.e. push right 30px). Is this correct? I hope that made sense.