How to set a one-sided container in CSS?

Question

I have set up a container class as such:

.container {
   margin: 0 auto;
   width: min(90%, 70.5rem);
}

This would allow me to set a container to contain the content of the web page in the center of the page (much more organized). However, I would like to have one custom container where, the margin only exists on the left side of the page, allowing the content to overflow on the right side of the page. How should I modify my code to do this? I've used margin-left before but this is not responsive unlike the code I provided above.

Answer 1

Do it like below. I kept both methods so you can compare the code:

.container {
  margin: 0 auto;
  width: min(90%, 70.5rem);
}

.new-container {
  margin-left: calc((100% - min(90%, 70.5rem))/2);
}

[class] {
  background: red;
  height: 50px;
  margin-block: 10px;
}

body {
  margin: 0;
}

<div class="container"></div>

<div class="new-container"></div>