How to make CSS SVG files close together using Flex

Question

This is my first post on here as it seems to be quite a weird problem.

I am very new to HTML and CSS but I seemed to have learnt the majority of it in a couple of days. There is one thing which is very confusing to me regarding flex. It has been very simple when dealing with other elements, like the links in the Navigation at the top of the page. However when I have put flex on the Social Media SVG icons, they have this weird spacing between them.

Here is me hovering my mouse over the gaps when in F12 picker mode

The spacing isnt padding or margins or anything like that. All I have done is set the container they are in to have display:flex; and that is it. Any help will be appriciated!

The website I am building with the problem area circled in red

Side note: Sorry most of the site is blurred, it contains potentially sensitive information about a small organisation I wouldn't like to be shared :(

Here is the CSS Code:

.footer {
  display: flex;
  justify-content: space-around;
}

.social-icons ul {
  display: flex;
}

.social-icons img {
  width: 5em;
}

Here is the questionable HTML:


  
    
      
        Follow Us:

user_3807365 · Answer

You are using flex on a ul tag which has its own styles (like padding and list-style), so I reset those.

.footer {
  display: flex;
  justify-content: space-around;
}

.social-icons ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-icons img {
  width: 5em;
}


  
    
      
        Follow Us:

How to make CSS SVG files close together using Flex

1 Answers