My React project is experiencing issues with the CSS file. The first header in the CSS file works fine, but the second header and every other class created after it are not responsive. Only the 'header' class is properly linked to Header.css file. Can someone help me resolve this problem?
Header.js file.
I have imported the CSS file correctly, but it's still not working as expected.
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've tried changing names and adjusting sequences, but only .header responds in my live server.