Responsive landing page

Hi Stephen,

In answer to your question:

You are close, if you move te styling of the border from the i elements to the parent div you're all set. The i element is used for the fontawesome. I would not use it for other styling. The padding right you added to create the space between the icons will be a problem if you move the border styling. You can change that to margin. Notice you are writing invalid css with your line of: border-color: #fff 20px solid Do you know how you can fix that? I won't write it out for you, so you can try for yourself. If you need more help to get it to work, feel free to respond.

Something to add: color: white to the div styling to give the icons the white color to start with.

Hope this helps you to finish this challenge nicely!

Happy coding!

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨To properly center the container.

• USING FLEXBOX

main{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

• USING GRID

main{
min-height: 100vh;
display: grid;
place-items: center;
}

➨ Quick Method : For circle border around social icons :

i{
color: white;
border: 1px solid white;
border-radius: 50%;
}

• You can adjust spacing using padding.

I hope you find this helpful.

Happy coding😄