Question 74556 in CSS Question posted in
Some basic documentation can be found here.

margin right doesn't apply on container – Css

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>
Tags:

2

Answers


  1. 0

    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 Docs

    You 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:

    .container {
  width: 100vw;
  display: flex;
  margin: 0 25%; //top / bottom / left / right
}

    Or use px instead of relative lengths (rem/em) etc. Which is Better to Use in CSS: px, em, or rem W3Docs Article

    .box-2 {
  background-color: blue;
  margin-right: 50px; /* This you can adjust */
}
    Login or Signup to reply.
  2. 0

    You can give padding instead of a margin if you want space between two sides.

    .container {
  width: 200vw;
  display: flex;
  padding: 0 15%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search