Icons from contact page are misplaced

Using chrome right click on the problem element and select inspect element. This will show the developer console window. The main top window (the one with elements tab selected) shows the HTML and the smaller window to the right (with styles tab selected) shows what CSS styles are being applied. The bottom window is the javascript console but don't worry about that now.

Using the styles window to the right, look at the list of styles and see what is being applied or not being applied that might be causing issues. You can also go in there and turn styles off, change values or add styles on the fly to see what might fix your issue.

The developer console is a great way to debug your site!

Thanks!

From what I can see the problem can be fixed using this

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

I.E. removing "display: block", but when I do that I lose the formatting (the space between each of them) and trying to change the padding or margin does not seem to work. Anymore suggestions?

Will!

Hmm it's hard for me to tell without seeing the actual css and html.

Are they floated? Try adding float: none; and see what happens. Or try making it display: inline-block;

Also do you have position: absolute or position: relative set anywhere in your css?

But it sounds like to me that its one of those as it's a layout issue. It can also be a class given to the parent element as well that is causing the issue.

Got it Daniel Jackson!

Thanks for your help!