How to make Grid or flex item stays the same length, without content overflowing it's container or overlapping?

How do you make sure that the image or video keeps their length?

I am new to HTML and CSS and I am trying to make a project of a YouTube clone, by modifying the source code of a course. This is a screenshot. However, every time I use image other than the course's source code, it breaks and I can't understand why?

I tried using flex, but items are overflowing.

How do you make sure that a grid or flex item stays the same length, without content overflowing it's container?

HTML CODE::

<main><section class="video-grid"><div class="video-preview"><div class="thumbnail-row"><img class="thumbnail" src="images/selmon-bhai.jpeg"><div class="video-time">14:20</div></div><div class="video-info-grid"><div class="channel-picture"><img class="profile-picture" src="images/hrithik.png"></div><div class="video-info"><p class="video-title">                Selmon Bhai ne mumbai me bacchi ko bachaaya. &#129402; &#129402;</p><p class="video-author">                Marques Brownlee</p><p class="video-stats">                3.4M views &#183; 6 months ago</p></div></div></div>----------This keeps going=--------------</main>

CSS code:

.thumbnail {  width: 100%;}.video-title {  margin-top: 0;  font-size: 14px;  font-weight: 500;  line-height: 20px;  margin-bottom: 10px;}.video-info-grid {  display: grid;  grid-template-columns: 50px 1fr;}.profile-picture {  width: 36px;  border-radius: 50px;}.thumbnail-row {  margin-bottom: 8px;  position: relative;  /* object-fit: cover; */}.thumbnail-row {    object-fit: cover;}.video-author,.video-stats {  font-size: 12px;  color: rgb(96, 96, 96);}.video-author {  margin-bottom: 4px;}.video-grid {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  column-gap: 16px;  row-gap: 40px;}@media (max-width: 750px) {  .video-grid {    grid-template-columns: 1fr 1fr;  }}@media (min-width: 751px) and (max-width: 999px) {  .video-grid {    grid-template-columns: 1fr 1fr 1fr;  }}@media (min-width: 1000px) {  .video-grid {    grid-template-columns: 1fr 1fr 1fr 1fr;  }}@media (min-width: 400px) and (max-width: 600px){    .video-grid {      grid-template-columns: 1fr ;    }  }.video-time {  font-size: 12px;  font-weight: 500;  padding: 4px;  border-radius: 2px;  background-color: black;5  color: white;  position: absolute;  bottom: 8px;  right: 5px;}

type here