Img not resizing using css - css

Question

Hi I am trying to create the header of amazon homepage by following a tutorial on youtube but I am unable to get the amazon logo to be displayed smaller on the left side of the browser.
Here is my Header.js code:
import React from 'react';
import "./Header.css";
import SearchIcon from '#mui/icons-material/Search';
import { IconButton } from '#mui/material';
import AddShoppingCartOutlinedIcon from '#mui/icons-material/AddShoppingCartOutlined';
function Header() {
return (
<div className="header">
<img
classname="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt="amazon logo"
/>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Deliver to</span>
<span className="header__optionLineTwo">Singapore</span>
</div>
</div>
<div className="header__search">
<button className="header__searchFilter">All</button>
<input className="header__searchInput" type="text"></input>
<IconButton>
<SearchIcon className="header__searchIcon" />
</IconButton>
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Hello, sign in</span>
<span className="header__optionLineTwo">Account & Lists</span>
</div>
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Returns</span>
<span className="header__optionLineTwo">& Orders</span>
</div>
</div>
<div className="header__nav">
<div className="header__option">
<AddShoppingCartOutlinedIcon className="optionCart" />
<span className="header__optionLineTwo">Cart</span>
</div>
</div>
</div>
)
}
export default Header
Here is my Header.css code:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}
.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}
.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}
.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}
.header__searchIcon {
padding: 5px;
height: 22px;
background-color: #cd9042;
}
.header__optionLineOne {
font-size: 10px;
color: white;
}
.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
color: white;
}
.header__optionCart {
display: flex;
align-items: center;
color: white;
}
.header__nav {
display: flex;
justify-content: space-evenly;
}
The rendered site looks like this now:
It is supposed to look like this:
Please let me know what am I doing wrong. Thank you!

Answer 1

it seems you made a mistake at img - class name, so styles are not being applied there.
<img
className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt="amazon logo"
/>
change classname to className

Answer 2

Don't use width use height
.header__logo {
height: 50px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}