Cant seem to get my images to show on the contact page next to links. please help! THANK YOU

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

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

a{
text-decoration: none;
}

#wrapper  {/*use the hashtag to select an id*/
  max-width: 940px;
  /*want the width to be no longer than 940px across but the width can be smaller*/
  margin: 0 auto;
  /*sets the spacing around the element, 0 sets the top and bottom, auto fills in any space on the left or right side of margin*/
  padding: 0 5%;
  /* sets 0 padding to top and bottom, 5% padding left and right, adds 5% of the total wrapper itself. Basically its adding the orange to the left and right side by 2.5% left and 2.5% right */
}

img {
  max-width: 100%;
  /* tells images to fill the width of the parent container, if the container shrinks down in size the image will shrink with it*/
}

h3  {
  margin: 0 0 1em 0;
}

/***********************
  HEADING
***********************/ 
header  {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%; /* becuase its floated it does not have a specific width, so you must tell browser to stretch the headers width 100% across the window*/
}

#logo {
  text-align: center;
  /* centers text*/
  margin: 0;
  /* no spacing around the element*/
}

h1  {
  font-family: 'Pacifico', cursive;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.3em;
  /* Adding sans-serif just incase it needs to fall back on a typical font they for sure will show
    Added 15px spacing top and bottom zero to left and right
    Font is set .75 larger than the default size*/
}

h2  {
  font-size: 0.75em;
  margin: -5px 0 0; /* first value sets top, second value sets left/right, third value sets bottom*/
                    /* -5px pulls the element closer to other elements around it, not away.  use when                         you want elements tighter together.*/
  font-weight: normal: /*unbolds font*/

}

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

nav {
  text-align: center;
  padding: 5px o;
  margin: 20px 0 0;
}

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

nav li  {
  display: inline-block;
  /* sets the element in a line but also gives it width and height properties that can be adjusted*/
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
  /* adding the padding here allows easier access to click individual anchors, looks nicer*/
}
/***********************
  FOOTER
***********************/ 

footer  {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  /*setting the footer to clear:both its cancleing out the float from the parents to allow the footer to be where it belongs, in the middle bottom*/
  padding-top: 50px;
  color: #ccc;
}

.social-icon  {
  width: 20px;
  height: 20px;
  margin: 0 5px; /* give some seperation between two icons if i had another icon*/
}

/***********************
  PAGE: PORTOFLIO
***********************/

#gallery  {
  margin: 0;
  padding: 0;
  list-style: none; /* remove any bullet points from list*/
}

#gallery li {
  float: left;
  /*allows to position elements floated to left or right, images are set side by side, text will float around that image*/
  width: 45%; /* makes the images to only take up 45% of width regardless of the size of the browser window, default width is 100%*/
  margin: 2.5%; /* gives 2.5% margin from each element, regardless of browser window size*/
  background-color: #f5f5f5;/*medium grey color*/
  color: #bdc3c7;
}

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

a {
  color: #6ab47b;
}

header  {
  background: #6ab47b;
  border-color: #6ab92b;
}

h1, h2  {
  color: #fff;
  /* use comma to select mutliple elements, if theyre descending you use no comma*/
}

nav {
  background: #6ab92b;
}

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

.profile-photo  {
  display: block; /*using display:block will allow us to use auto margins to center the element on the page. similair to the the wrapper div*/
  max-width: 150px;
  margin: 0 auto 30px; /* centering the photo*/
  border-radius: 45px; /* gives rounded corners to the element. which this gives it a circle look*/
}


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

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

.contact-info a {
  display: block;
  /*each element selected will take up space*/
  min-height: 20px;
  /* min height our icons will be fully visible*/
  background-repeat: no-repeat;
  /*the image will not repeat but rather just show once*/
  background-size: 20px 20px;
  /* will resize the background*/
  padding: 0 0 0 30px;
  /*want lots of extra space on the interior of left side (30px). will push the links to the right*/
margin: 0 0 10px;
/* gives our links some seperation at the bottom of them. gives a visually better look and UX*/
}


.contact-info li .phone a  {
  background-image: url('../image/phone.png');
}
  /* the ../ brings you up one from where the main.css is, ../ your now in the main HOW TO folder,then your select down into img folder then select image*/

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

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



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

nav a:visited {
  color: #fff;
}
/* nav a:visited is a psuedo-class(choose an element followed by : then the action) and its making all links in the nav section WHITE even after its been visited*/

nav a.selected, nav a:hover{
  /* targeting the class "selected" in the anchor element of the nav section
  a:hover gives style to the anchor in the nav when user is hovered over the element*/
  color: #32673f;
}

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

/*_______________________________________________________________________*/