Specificity: overriding body in css

HTML-CSS
1

Hey guys

Haven’t found any clear answers to this question except for !important.

In CSS, my body element is set to text-align: center;

I want to override the class icon1 in my HTML to have the three icons appear horizontally.

Any tips?

https://codepen.io/imanhuter/pen/YMeVeZ

3

The icons are not stacked because of text-align. They are stacked because you have given the images 100% width, so no matter what width you give the container they will each take up the full width of the container.

.icon1 {
  margin: 25px;
  width: 100%;
}

.icon1 > img {
  max-width: 80px;
  margin: 10px;
}

Or you can use flexbox and get some auto spacing for free.

.icon1 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 25px auto 0 auto;
}

.icon1 > img {
  max-width: 85px;
  margin: 10px;
}

But if you did want to overwrite you can use both text-align: initial; or text-align: left; as long as the selector with the overwrite is

A). Below the other selector and has the same specificity.
B). Anywhere but has higher specificity.

4

hi there

Thanks a lot for the tips. I didn’t mention that I want to turn these images into links, so when I turned the linkedin icon into a link, well, here is the link:

https://codepen.io/imanhuter/pen/YMeVeZ

Never seen it react like that…thanks a lot for ur time