Unable to center contact links? Using flexbox

Hi there! FCC has been really amazing so far!
I have been working on the personal portfolio page and I’m almost done with it. I just can’t seem to figure out why the contact-links are not centering. I have put a black border around them to debug.
Here’s my pen: https://codepen.io/rgbcrayon/pen/VwvrxGa

Thank you all in advance! May the FCC be with you! :smiley:


Funny, they look centered with the border but when I remove it, the elements are placed as a column (vertically).

Anyway, try with the flex-direction property, which can be column or row for this case (I’ll let you figure out which).

Also, take a look at the Flexbox: The Animated Tutorial, which may help you with this :slight_smile:.

By the way, depending on the browser, additional CSS may be needed.

I hope it helps :slight_smile:,

Happy coding!

Hi, @skaparate!
Yeah, that’s how I did it. The thing that confuses me is that the “twitter” in the middle isn’t at the center of the screen. I do realize the parent element is centered, but this isn’t centered to me(I don’t think it’s centered). If you get what I’m saying.
Thank you for helping! :slight_smile:

I understand, but up to a certain point. Because I see it centered, I would need some kind of example or an image with what you’re expecting :stuck_out_tongue:.

Though you seem to have solved the issue, or am I wrong?

I haven’t really fixed it.
Imagine three apples in a div element. If I center the div element, I expect the middle apple to be cut right along its center and the other apples should be around it.
What I’m seeing is, the div element is centered, but the twitter button doesn’t appear to be “cut” along the middle.

Or it might just be my eyesight.