Image not resizing using CSS-CodePudding

My image is not resizing using CSS. I tried all the suggestions on previously asked questions but still can't get it to resize. My style sheet is linked because it moves the items to the center. Please advise what I am doing wrong. TIA

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.menuContainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menuBox img {
  width: 300px;
  height: 300px;
}

<div >
  <div ></div>
  <h1 id="item">Food Item1</h1>
  <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p>
  <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">

  <h2 id="hotel">Hotel name1</h2>
  <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p>
  <div >
    <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
    <button id="random">Random Menu</button>
    <button id="next">:arrrow </button>
  </div>

</div>

CodePudding user response：

<div ></div>

versus

.menuBox img

The css Code adresses an image in a Container with the class menuBox. In your example the Container does not contain the image.

So your code would look like this:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.menuContainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menuBox img {
  width: 300px;
  height: 300px;
}

<div >
  <div >
    <h1 id="item">Food Item1</h1>
    <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p>
    <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">
  </div>
  <h2 id="hotel">Hotel name1</h2>
  <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p>
  <div >
    <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
    <button id="random">Random Menu</button>
    <button id="next">:arrrow </button>
  </div>

</div>