How can I decrease the space between my flex elements?

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.

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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% 
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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

You can keep the HTML valid and leverage flex-grow. Add a class to the list items you want to adjust then use flex-grow:0.5; or a value that works for you.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

header ul li.social-header{
  flex-grow:0.5;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
  <div>
    <ul>
      <li class="social-header"><a class="social-header-facebook" href="#"><i class="fa-brands fa-facebook fa-xl"></i></a></li>
      <li  class="social-header"><a class="social-header-instagram" href="#"><i class="fa-brands fa-instagram fa-xl"></i></a>
      <li  class="social-header"><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>

<!-- end snippet -->

You could also skip adding a class and use the nth-child pseudo class, but an explicit class is better .

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

header ul li:nth-child(-n + 3){
  flex-grow:0.5;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<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>

<!-- end snippet -->