Following the idea of Chonchol answer, and trying to keep the content centered, I have added a pseudo element on the container
.container {
display: flex;
border: solid 1px blue;
margin-top: 60px;
}
.container div {
margin: 10px;
border: solid 1px red;
}
.container .right {
margin-left: auto;
width: 150px;
text-align: right;
}
.container:before {
content: "";
width: 150px;
margin-right: auto;
margin-left: 10px;
background-color: yellow;
}
Project
About the Project
Contact Us
Mailbox
I set on the pseudo a color so that the example can be understood, of course it should be invisible.
To get the elements to be perfectly centered, you need to give to the pseudo element the same width than the last element. If you know it, do so. If not, play with a greater width and a text-align as in the snippet. Of course, if you don't need the center to be perfect, that is not necesary
