I’m making a header and in that header I want the margin between the social media links to be small while the margin between the home, about, policy, contact links to normal.

this is what it looks like

this is my html

 <header>
            <div>
                <ul>
                    <li><a class="social-header-facebook" href="#"><i class="fa-brands fa-facebook fa-xl"></i></a></li>
                    <li><a class="social-header-instagram" href="#"><i class="fa-brands fa-instagram fa-xl"></i></a>
                    <li><a class="social-header-twitter" href="#"><i class="fa-brands fa-twitter fa-xl"></i></a></li>
                    <li><a class="links-header" href="#">home</a></li>
                    <li><a class="links-header" href="#">about</a></li>
                    <li><a class="links-header" href="#">policy</a></li>
                    <li><a class="links-header" href="#">contact</a></li>
                </ul>
            </div>
        </header>

this is my css

header {
    position: sticky;
    top: 0;
    /* sticky with top 0 make the bar sticks to the top */

}

header ul {
    display: flex;
    position: absolute;
    width: 100%;
    /* when using flex and absolute you will need width % to make your items fill the screen */

}

header ul li {
    list-style: none;
    flex-grow: 1;

}

header .links-header {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s;

}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    transition: .5s;
}

ps: I’m a begginer at css and this is my first time using flex anyway, so I’d be thankful if you point out any mistakes you find as well.

I tried setting a negative margin but that didn’t work as inteneded.

>Solution :

The easiest solution would be to put the 3 "li" containing the social media links inside a div and give that div a width. This can be achieved using the below code. The shorter the width of the container div, the closer your social media icons.

body{
  background:url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__480.jpg') no-repeat ;
  background-size:cover;
}


header {
    position: sticky;
    top: 0;
    /* sticky with top 0 make the bar sticks to the top */

}

header ul {
    display: flex;
    position: absolute;
    width: 100%;
    /* when using flex and absolute you will need width % to make your items fill the screen */

}

header ul li {
    list-style: none;
    flex-grow: 1;

}

header .links-header {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s;

}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    transition: .5s;
}

.social-icons{
  width:20%;
  display:flex;
  padding:0 10% 
}

<header>
            <div>
                <ul>
                  <div class="social-icons">
                     <li><a class="social-header-facebook" href="#"><i class="fa-brands fa-facebook fa-xl"></i></a></li>
                    <li><a class="social-header-instagram" href="#"><i class="fa-brands fa-instagram fa-xl"></i></a>
                    <li><a class="social-header-twitter" href="#"><i class="fa-brands fa-twitter fa-xl"></i></a></li>
                    
                  </div>
                   
                    <li><a class="links-header" href="#">home</a></li>
                    <li><a class="links-header" href="#">about</a></li>
                    <li><a class="links-header" href="#">policy</a></li>
                    <li><a class="links-header" href="#">contact</a></li>
                </ul>
            </div>
        </header>

PS: Please change your background accordingly. I have used one for demo purposes.