Trouble resizing image / style not apply

I'm working an a simple react page web that list different plants, but i have problem resizing an image, my lmj-logo EDIT: What I mean is that my image is far bigger than 45px wanteed. But I think it's not just my image, it's seem like none styling in Banner.css apply to Bannner componnet in Banner.js...

my Banner.js:

import '../styles/Banner.css'
import logo from '../assets/logo.png'

function Banner() {
    const title = 'La maison jungle'
    return (
        <div className='lmj-banner'>
            <img src={logo} alt='La maison jungle' className='lmj-logo' />
            <h1 className='lmj-title'>{title}</h1>
        </div>
    )
}

export default Banner

I have already try to add .img before the .lmj-logo

Banner.css:

.lmj-banner {
    color: black;
    text-align: right;
    padding: 32px;
    border-bottom: solid 3px black;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

.lmj-title {
    padding-left: 32px;
}

.lmj-logo  {

    height: 45px;
    width: 45px;
}

tree src/

src/
├── assets
│   ├── logo.png
│   └── logoFeuille.png:Zone.Identifier
├── components
│   ├── App.js
│   ├── Banner.js
│   └── Cart.js
├── index.js
└── styles
    ├── App.css
    ├── Banner.css
    ├── Cart.css
    ├── banner.css
    └── index.css

EDIT: I change my style:

.lmj-banner {
    color: red
}

.lmj-title {
    color: blueviolet;
    padding-left: 32px;
    align-items: right;
}

.lmj-logo {
    height: 45px;
    width: 45px;
}

But nothing change in my page