Trying to decrease the spacing between my social media icons and the words adjacent to them

HTML-CSS
1

I want the spacing between the icons and the words adjacent to them to look like this:

spacingicons
spacingicons1568×400 25.8 KB

Here is what they actually look like so far:

actualicons
actualicons1741×412 28.5 KB

I’ve tried adjusting my margin-right property to where it was 0 but that hasn’t closed the gap betwween the icon and the word next to the icon. What do you think I should do?

Here is a link to my code:

2

replace padding: 3rem;
with that margin-right: 10px;
on the a tag css and you should be golden

1 Like
3

I am not straight out giving u the answer
I am going to give u an example of how u can do things
check out the link bellow :3
https://codepen.io/maria-hoek/pen/JjjJjPe

4

Thanks. But what do I do now that the words in my navbar are bunched together?

5

Don’t set styles on elements that are specific to their use on only some parts of the page. It is highly unlikely you want all <a> elements to have margin-right: 10px;.

Styles set on elements should be universal, something you know you want on all instances of the elements everywhere. They can be given styles using classes specific to their use.

You can give .word-icon some negative margin-left to pull the span and icon closer together. But I would suggest this.

/* distribute horizontal space and make the icons wrap */
.social-icons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
/* make the span and icon sit right next to each other, align vertically if needed */
.social-icon {
  font-size: 2rem;
  margin: 1rem;
  display: flex;
  align-items: center;
}
/* push the span and icon away from each other again by whatever amount you want */
.word-icon {
 margin-left: 8px;
}
1 Like