Why is my Align-items not having any efffects?

Question

I'm trying to make my image be a the center of my container but it won't center and I don't know why.

The container of the picture :

.navbar-4{
    width: 13vw;
    height: 8vh;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: transparent;
}

The properties of the picture :

.photo{
    width: auto;
    height: 3vh;
    background-color: transparent;
  }

The picture in itself (I'm using React) :

import React from 'react'
import logo from './images/logoo.png';

function Logo() {
  return (
    <div> <img className='photo' src={logo} />

    </div>
  )
}

export default Logo

The result :

Same result but with some colors :