How can I make a div fill the whole possible width after giving margins both to left and right?

Question

I am trying to make a div fill the possible place after its margins taking effect.

For example if the screen width is 200 and the class is declared as below:

.mini_video {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

Can the mini_video have 160px width and be in the middle?

I am also using Bootstrap if it can help me in any way.

Answer 1

I'd be using padding for this use case. You could use an outside container and add padding to it for the video. Object-fit on the video allows it to scale progressively.

.mini_video-container {
  width: 100%;
  padding: 0 20px;
  max-width: 1000px;
  background-color: orange;
}
video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: fill;
}

https://codepen.io/jeffteachestheweb/pen/abJVNjg

Answer 2

You can add max-width: 100%; instead of width: 100%;

.mini_video {
  max-width: 100%;
  margin-left: 20px;
  margin-right: 20px; 
}

Take a look at that example

 * { margin: 0; padding: 0; box-sizing: border-box; }.mini_video { max-width: 100%; margin-left: 20px; margin-right: 20px; border: 1px solid #000; text-align: center; }

 <div class="mini_video">Hello World</div>