How can I add a small space between the two images on the far right of my website?-CodePudding

I know this is an amateur question but I am absolutely lost. I am only just starting out my website and I am looking to add a small space between the two logos on the right. I have been trying for about 2 hours and can't find anything. This is the HTML -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="ie-edge">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./Style.css">
    <title>Joshua's Portfolio</title>
</head>
<body>
    <header>
        <div >
            <img src="./Images/photoroom.png" alt="Image not found" width="60px" height="40px">
        </div>
        <nav>
            <ul class ="navbar-links">
                <li><a  href="$">HOME</a></li>
                <li><a  href="$">PROJECTS</a></li>
                <li><a  href="$">ABOUT</a></li>
            </ul>
        </nav>
        <div >
            <img src="./Images/linkedin-original.svg" alt="Image not found" width="30px" height="55px">
            <img src="./Images/github-original.svg" alt="Image not found" width="30px" height="55px">
        </div>
    </header>
</body>
</html>

This is the CSS -

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box
}

body {
    font-family: 'Raleway', sans-serif;
    background-color: #c8b69a;
}

header {
  display: flex;
  width: 90%;
  margin: auto;
  background-color: #814E10;
  align-items: center;
}

.logo-container, .navbar-links, .socials {
  display: flex;
}

.logo-container {
  flex: 1;
}

nav {
  flex: 2;
}

.navbar-links {
  justify-content: space-around;
  list-style: none;
}

.navbar-link {
  text-decoration: none;
}

.socials {
  flex: 1;
  justify-content: flex-end;
  margin-right: 13px;
  
  
}

If anyone has any suggestions it would be much appreciated, thanks!

CodePudding user response：

All you need to do to define which element you want to add margin to:

.socials img:first-child {
  margin-right: 13px;
}

By this, you can say that in class .socials the first element of img will have margin-right equal to 13px.

CodePudding user response：

Ok I feel you one this, having gone through learning CSS its a pain, you dont want to target the social class because that is the parent of the img's. ( imagine there's a box wrapping the 2 imgs )

What you want to target is ... (.socials img {} )

this will target the individual img tags and from there you want to add a margin-left of 13px.

You dont want to do margin-right because that will push the both imgs 13px to the left of the navbar, making it uneven

.socials img {
   margin-left:13px
}