Navigation bar with some elements in centre, some aligned right. Image needs to be resizable

Question

I'm trying to create a Navigation bar with a logo in the centre of it, and then links aligned at the right. I also need to be able to resize the logo. It should be easy.

With the following, I can just about get what I need. I just can't get the logo to be central on the top line.

If I don't use image-size and figure then the logo is central, but I can't resize it.

I've been going round in circles on this, so grateful for help

example on plnk here

<nav>
  <ul class="container">
    <li id="lnkHome"> <a href="index.html" >
      <img class="image-size" src="https://www.stickpng.com/img/download/5e8ce4a6664eae0004085468/image" />
      </a>
    </li>

    <li class="d">LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
  </ul>
</nav>

`

html {
  font-size: 100%;
  text-align: left;
  background-color: rgba(39, 168, 223, 1);
  font-family: "Roboto", sans-serif;
  color: white;
}

.container {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

#lnkHome {
  width: 5;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.image-size {
  height: auto;
  width: 100%;
}

figure {
  width: 100px;
}

.d {
  margin-left: auto;
}

Answer 1

Just remove margin-right:auto from #lnkHome