Flexbox and social link hover

How can I simultaneously hover the social links a border and a logo and there is a problem to my code what advice you will give?

This is happening because you used border-radius = 50% on <li> instead of the <i> element. Actually on your code, you used CSS on <li> instead of <i> this is what you have :

li {
      border: solid 2px #fff;
      background: none;
      padding: 0.2em;
      padding: 0.4em;
      width: 40px;
 }
 
   ul li:hover, i:hover{
      border-color: hsl(300, 69%, 71%);
      color:  hsl(300, 69%, 71%);
}

remove that and use something like :

i {
      border: solid 2px #fff;
      background: none;
      padding: 0.2em;
      padding: 0.4em;
      width: 40px;
 }
  
     i:hover{
        border-color: hsl(300, 69%, 71%);
        color:  hsl(300, 69%, 71%);
     }

it'll work.

Good Luck.

Hi Troy 👋 You are doing a great job. Keep going 👍 About your issues with these icons. My suggestion is:

1. make your <li> to display: flex with align-items and justify center.
2. Also, Remove all paddings from <li>, and set fixed sizes for both width and high to 40px.
3. flex-grow set to 1 for anchor element, as they had to fill all space.
4. font-style: normal to <i> as they have italic style by default. And one more tip, try to play with these elements using the development tool in your browser. In this case, you get fast results and then get to write these changes to your code. Be careful, after you save your code, all the changes, that you’re playing in the browser, will be gone. Because after you save, the browser will reload your page. Keep going, good luck 👍

Thank you guys I already push a changes and I realize is okay to commit mistake and theres someone who will help you. Anyway is there any courses or resources to learn responsive design I already responsive but only for 720px.