<div class="container">
  <div class="red-box with-margin">Without Transform</div>
</div>

<div class="container">
  <div class="red-box with-transform">With Transform</div>
</div>
body {
  padding: 1em;
}

.container {
  background-color: #ddd;
  width: 400px;
  margin: auto;
  + .container { margin-top: 1em; }
}

.red-box {
  background-color: red;
  height: 50px;
  width: 100px;
  padding: 0.2em;
  
  &.with-margin {
    margin-left: 50%;
  }
  
  &.with-transform {
    transform: translateX(50%);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.