Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Armando Abrahamsson
Armando Abrahamsson
1,391 Points

Footer href img not sitting horizontally.

The Facebook and Twitter links are sitting horizontally on top of each other on my contact page. However, they remaind centered in the bottom of my index and about page. 

<footer>
      <a href="https://twitter.com/morganneves">
      <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://www.facebook.com/Armando.Abrahamsson">
      <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 Armando Neves.</p>
    </footer>

```css
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Armando,

Can you paste your css please.
Also, is your footer code identical on all pages?
Do you have the footer surrounded by a different div or class on those pages you have the styling error on?

Armando Abrahamsson
Armando Abrahamsson
1,391 Points 
/***********************

GENERAL

***********************/


#wrapper{
max-width: 940px;
  margin: 0 auto;
padding:0 5%;
}

/*links*/
a {
text-decoration:none;
}


img{
max-width: 100%;
}

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

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: 'Changa One', cursive;
margin: 15 px 0;
padding-top:35px;   
font-size: 1.75 em; 
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 {
padding:15px 15px;
font-weight: 800;
}


/***********************

FOOTER

***********************/

footer{
font-size: 0.75em;
text-align: center;
padding-top: 50px;  
color: #ccc;  
}
#gallery li{
float:left;
width:45%;
margin:2.5%;
background-color:#f5f5f5;
color:#bdc3c7
}

.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%;
background-color: #f5f5f5; 
color: #bdc3c7;
margin:2.5%;


}

#gallery li 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: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 a{
color:black;

}

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

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


/***********************

COLORS

***********************/


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

/*green header*/
header {
background: black;
border-color:#00aa55;
}

/*nav background on mobile device*/
nav {
background:#cccccf;
}

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

/*links*/
a {
color: #FFFFFF;
}


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

/*selected link*/
nav a.selected, nav a:hover{
  color: #909090;
}

p a{
font-family: 'Open Sans', cursive;
color: black;
}


```css


I have checked the html and its identical on the page where it is correct and the page where its problematic.

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Armando,

Can you try moving all the css for you footer to the bottom of you css code, just to see if its a cascading issue.

Armando Abrahamsson
Armando Abrahamsson
1,391 Points
Armando Abrahamsson
Armando Abrahamsson
1,391 Points

No difference there.