Advice on centering social media icons for portfolio page

Yo, fellow campers!
I’ve been working on my portfolio page for a bit now and I’m currently having trouble centering my social media icons. I’m using font awesome icons as a way to do it and I’ve tried answers from stack overflow but nothing has worked so far. I’m wondering if any of you can lend me a hand?

Here’s what my HTML looks like:

Portfolio page

About me

I am Daniel Negrete

This is my portfolio page as part of the Free Code camp project. I am videographer.

Portfolio

Contact

and my CSS:

html{
background-color: #94b9db;
}

body{
background-color: #ebebeb;
padding: 10px 10px 10px 10px;
width: 960px;
margin: 0 auto;
font-family: ‘Montserrat’, sans-serif;
color: black;
}

a {
text-decoration: none;
font-size: 15px;
}

img{
display: flex;
height: auto;
width: 180px;
margin: 0px 50px 50px 350px;
padding: 5px 5px 5px 50px;
}

#portfolio{
background-color:#6d8ac1;

}

#contact{
background-color:#474c51;
}

.fa {
padding: 20px ;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 5px 5px 5px;
}

If I’m not mistaken it’s because you have text-align: center applied to the icons instead of the enclosing <div> element (#contact). Text align controls the alignment of an element’s inline content (documentation).

In the future you may want to provide a link to your page as well wrap your code with triple back-ticks:

```
  // Code
```

I hope that helps!

1 Like