Content does not seem to go full width?

Help
1

So I have content in my style.css file, and I have full-width set to true in my html file, but when I adjust the width: rem; or height:rem; in style.css, it doesn’t seem to change properly and it still constrains it, I want it to fill the empty space.

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

.video-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.video-container .video{
  height:15rem;
  width: 20rem;
  margin:1rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.5);
  overflow: hidden;
  border-radius: 1rem;
}

.video-container .video video{
  height:100%;
  width:100%;
  object-fit: cover;
  outline: none;
  border: none;
  cursor: pointer;
}

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assets/css/style.css">
  </head>

  <body>

    <div class="container">

      <div class="video-container">

        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>

        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>

        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>
        
        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>

        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>

        <div class="video">
          <iframe src="https://youtube.com/embed/tUQwKpzFIjY?feature=share" width="100%" height="100%" style="border: 0" allowfullscreen></iframe>
        </div>

      </div>

    </div>

  </body>

</html>

Site: Content Creation

2

I know you are trying to achieve a squarish shape

Try this I think this might look good:)

.video-container .video{
height:22rem;
width: 13rem;
margin:1rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,0.5);
overflow: hidden;
border-radius: 1rem;
}

3

Thanks for the reply, I’m not trying to achieve a squarish shape, what I have right now is close to what I need, but whenever I expand the video it constrains it.

What I want is for example is 3 videos at the top, middle, bottom, and so forth, so 3 videos for each row, like this right here, but I can’t seem to expand it:

image
image1068×578 104 KB