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!

CodePudding user response：

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

CodePudding user response：

Don't use width use height

.header__logo {
  height: 50px;
  object-fit: contain;
  margin: 0 20px;
  margin-top: 18px;
}