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 Personal Profile Page

AaronDavid Hammond
AaronDavid Hammond
6,303 Points
Posted by AaronDavid Hammond
AaronDavid Hammond
6,303 Points

On the profile page of my first project in the techdegree I can't seem to get my icons/centered on the page.

Here is my CSS... You can view it in action at adhammond.com

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px;

}

footer .copyright { top: -8px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

Thanks advance for the input! -AaronDavid

AaronDavid Hammond
AaronDavid Hammond
6,303 Points
AaronDavid Hammond
AaronDavid Hammond
6,303 Points

Could it be that the cards are adversely affecting it's position?

1 Answer

Jeroen Pets
Jeroen Pets
8,016 Points
Jeroen Pets
Jeroen Pets
8,016 Points

Hi Aroon,

i can't find it to start a techdegree where do i look on the website?

for your question footer > ul > li > a , your a tags have a left margin by 10px. That's why they look out off position, not exact in the center.

By adding right margin, you get the same effect you want but you're links are standing in the middle. Because now the left margin is adding 10px before your element, that's why everything looks out of the middle by 10px.

a.social {
    display: inline-block;
    text-indent: -9999px;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    opacity: .4;
    transition: all .5s;
}