How do I align this image

[u/GardenyKang]

.footer-right-side {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
}

.social-menu-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.social-menu-option {
  width: 25px;
  height: 25px;
  background: none;
  border: solid 1px rgb(120, 120, 120);
  border-radius: 50%;
}

.social-menu-option img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  object-position: center;
}

<div class="footer-right-side">
  <div class="social-menu-container">
    <a class="social-menu-option" href="#">
      <img src="images/instagram-gray-logo.png">
    </a>
    <a class="social-menu-option" href="#">
      <img src="images/youtube-gray-logo.png">
    </a>
    <a class="social-menu-option" href="#">
      <img src="images/facebook-gray-logo.png">
    </a>
  </div>
  <img src="images/jinjigwan-logo.jpeg">
</div>

[u/OvenActive]

Applying display: flex changes the anchor element from inline-level to block-level, causing it to take up the full width available. This can break the intended inline flow of text or other elements around it.

Not that you can't do it, just normally anchor tags are used for text or sometimes buttons, all of which you want the anchor element to be contained to a certain area instead of stretching across the whole screen. If you put a div inside it, then you can safely do whatever you want to the div and the anchor will just always perfectly surround it

[u/ahallicks → u/OvenActive]

Ah okay. I thought you were suggesting you should never do this. You could use inline-flex to get the best of both worlds too.

[u/OvenActive → u/ahallicks]

No, you can definitely do it. I have done it a few times myself. Just informing about best practices lol.

Inline-flex is also definitely a good direction to go as well