I am having issue in react in which my css file is not working properly , so the first header in css file is working fine but (header2) is not working in webpage its not changing , same with every other class i create after header , only header is responsive to Header.css file , please help me solve this issue. Header.js file. i have imported the css file correctly please help

const Header = () =>

{ return

( <div className='header'>

<div classname="header2">

<imgsrc="gym.png"alt="" src="gym.png" </div> </div>

Header.css file

.header {

display:flex;

padding: 15px 20px;

justify-content: space-between;

position: sticky;

background-color: rgb(235, 199, 153);

z-index: 100;

top:0;

box-shadow: 0px 5px 8px -9px black rgba(0,0,0,0,752);

}

.header2>img

{

height: 10px;

}

i tried changing names, shifting sequence but only .header would response in my live server