Phone # / phone img not displaying correctly on site.

Question

On stage seven of adding pages to website. The email pic with link and twitter pic with link displays correctly, however the phone number and phone picture come up on different lines for me ... here is the code. ***html <!Doctype html> <html> <head>

<meta charset="utf-8">
<title>Joey Martinez | Developer</title>
<link rel="stylesheet" href = "css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Audiowide|Orbitron:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">

</head> <body> <header> <a href = "index.html" id=logo> <h1>Joey Martinez</h1> <h2>Developer</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>I am currently learning basic html / css; I have taken courses in Java and SQL, I would love the chance to work and get to know these languages even better. If you have any questions or advice, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Google+ and email are the best way to reach me.</p> </section> <h3>Contact Details</h3> <ul class= "contact-info"> <li class ="phone"><a href ="tel:555-5555"></a>555-5555</li> <li class = "mail"><a href = "mailto:joeymmartinez@gmail.com">joeymmartinez@gmail.com</a></li> <li class = "twitter"><a href ="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul> <section>

  </section>
  <footer>
   <a href = "http://www.google.com"><img src="img/twitter-wrap.png" alt = "twitter logo" class = "social-icon"></a>
   <a href = "http://www.google.com"> <img src="img/facebook-wrap.png" alt = "facebook logo" class = "social-icon"></a>
    <p>&copy; 2014 Joey Martinez.</p>

  </footer>

</div> </body> </html> *** CSS /*********************** GENERAL ***************************/ body { font-family: 'Orbitron', sans-serif; }

a { text-decoration: none; }

img{ max-width: 100%; }

wrapper {

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

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: 'Audiowide', cursive; margin: 15px 0; font-size: 2.0em; font-weight: normal; line-height: 0.8em; }

h2 { font-family: 'Audiowide', cursive; font-size: 1em; margin: -5px 0 0; font-weight: normal; }

/************************** NAVIGATION ***************************/ nav { text-align: center; padding:10px; margin:20px 0 0; padding-top: 50px; color: #ccc; }

nav ul { list-style: none; margin 0 10px; padding: 0; }

nav li { display:inline-block; }

nav a { font-family: 'Orbitron' , sans-serif; font-weight: 700; padding: 15px 10px; } /************************** FOOTER ***************************/ footer { font-size: 0.75em; text-align:center; clear: both; padding-top: 50px; }

.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 { clear: both; 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.png'); }

/************************** COLORS ***************************/

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

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

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

/links/ a { color:#6ab47b }

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

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

/selected nav link/ nav a.selected { color: #55ddff; }

nav a:hover { color: #22bcce; }

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Martinez