Adding a link messes up icons

Question

So this is what I currently have. When I do

<a href="#"></a>

the icons shift up and they get messed up. As you can see here. The blue icon is the one that I want to be linked, but it's out of place. Any help would be great.

Answer 1

You have a direct child CSS relationship with this code:

.fs1 > span {
  position:relative;
  top:10px;
  margin-right:30px;
}

Change it to include all children:

.fs1 span {
  position:relative;
  top:10px;
  margin-right:30px;
}

Revised CodePen

---

---

The > operator in CSS signifies a direct child relationship, as such:

<div>
   <a class="one"></a>
   <span>
       <a class="two"></a>
   </span>
</div>

a.one can be targeted with div > a, however, since there is a span inbetween the div and a.two, div > a does not target a.two.

To target a.two and a.one, you would change it to div a, which applies to all a tags found inside of a div tag.