I have a container with width 200vw and I want add margin on left and right but for some reasons margin right doesn’t apply
.container {
width: 200vw;
display: flex;
margin: 0 15%;
}
.container>div {
width: 50%;
height: 700px;
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: blue;
/* margin-right: 50rem; */
}
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
2
Answers
Why you don’t see the changes is because your container "box-2" is being "ignore" because you have set your container to be 200vw W3School CSS Units which means that it will be twice as wide as the viewport width.
And then when you add your
margin-right: 50rem
to box-2 it will exceeds the width of the container (.container). The Box Model MDN DocsYou could either set the your container to
100vw
and then use the CSS top / bottom / left / right position CSS Tricks top / bottom / left / right position to specify say where the margin should be added:Or use px instead of relative lengths (rem/em) etc. Which is Better to Use in CSS: px, em, or rem W3Docs Article
You can give padding instead of a margin if you want space between two sides.