How to set container with max-width but only from one side?-CodePudding

My container looks like this:

.container{
    width: 100%;
    max-width: 1254px;
    margin-left: auto;
    margin-right: auto;
}

then I need a container that has the same margin from the left, but from the right it should have none.

I tried something like this however unfortunately it does not work.

 .containerFromLeft {
    width: 100%;
    max-width: 1254px;
    margin-left: auto;
    margin-right: 0;
}

CodePudding user response：

You can do it like below. I am using 500px for the demo but you can replace it with your width

.container {
  height: 100px;
  background: red;
  margin-left: max(0px, (100% - 500px)/2); /* what you need */
}


/* to compare with the classic configuration */
.box {
  height: 100px;
  background: green;
  max-width:500px;
  margin:auto;
 }

<div ></div>

<div ></div>