containers not centring horizontally

Question

I've tried multiple things to center my calendars horizontally on the page, adjusting for screen resizing as well. I've already tried multiple things stack overflow questions have suggested. I've tried adding display: flex; justify-content: center; to my containers which didnt end up centring my content. I've also tried removing my flex settings and setting display:inline-block which also fell short. Any ideas on how to center my content horizontally?

<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

@font-face {
    font-family: Raleway;
    src: url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');
}
body {
  position: relative;
}


.container {
  width: 380px;
  height: 350px;
  background-color: #fcfcfc;
  margin: -100px auto;
  position: relative;
  box-shadow: 5px 5px 40px #e8e8e8;
  border-radius:20px;
  float:left;
  transform:scale(.25);
  margin-right:-270px;
}
.one, .two {
  width: 18px;
  height: 45px;
  display:block;
  background-color: #FFF;
  z-index: 1;
  border-radius: 8px;
  position: absolute;
  top: -20px
}
.one {
  left: 80px
}
.two {
  right: 80px
}
.container .fe {
  width: 100%;
  height: 70px;
  top: 0;
  background-color: #1880c9;
  position: absolute;
  border-top-right-radius:20px;
  border-top-left-radius:20px;
}

.container .sr, .container .sr2, .container .sr3 {
  height: 220px;
  position: absolute;
  box-shadow: 0 2px 5px #ededed;
  
}

.sr{text-align:center;
font-family:raleway;
  Font-size:75px;
  font-weight:bold;
  color:#2f2e2e;
  
}

.sr span {
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container .sr {
  width: 280px;
  background-color: #fcfcfc;
  overflow:hidden;
  top:70px;
  left:50px;
  z-index:3;
  
}
.container .sr2 {
  width: 260px;
  background-color: #f0f0f0;
  top:80px;
  left:60px;
  z-index:2
}
.container .sr3 {
  width: 240px;
  background-color: #e8e8e8;
  top: 90px;
  left: 70px;
  z-index: 1
}
.container .sr p {
  width: 15px;
  height: 15px;
  background-color: #6120ec;
  border-radius: 100%;
  float: left;
  margin-left: 45px;
  margin-top: 22px;
  word-wrap: break-word;
}
.container .sr p:last-child {
  visibility: hidden
}
.container .sr p:first-child {
  visibility: hidden
}
</style>

<div class="all">
<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Mon</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Tue</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Wed</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Thu</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Fri</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Sat</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Sun</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div></div>

Answer 1

You're shooting yourself in the foot by trying to transform:scale(.25) everything. scale will change the visible size of things without affecting their layout, which is why you need that huge negative margin to try and fix it.

Problem is, flex also uses margin to layout its elements, so everything's gonna get janky.

Also, display: flex goes on the container of your calendar .containers, not .container itself (i.e. .all).

So all I did here:

• Remove the transform
• Divide any raw pixel values by ~4 (I rounded sometimes so double check)
• Add display:flex and justify-content:center to .all
• Add flex-shrink: 0 to .container so the flexbox doesn't try to compress things if they're too small
• Add margin: auto 5px to .container so there's 10px of space between calendars (see this question for other ways to do this)

You can play around with different justify-contents and other flex styles on .all and .container. (Also, maybe rename your classes because .all is really just a flexbox and .container should be like .calendar).

<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

@font-face {
    font-family: Raleway;
    src: url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');
}
body {
  position: relative;
}

.all {
  display: flex;
  justify-content: center;
}

.container {
  flex-shrink: 0;
  margin: auto 5px;
  width: 95px;
  height: 88px;
  background-color: #fcfcfc;
  position: relative;
  box-shadow: 5px 5px 40px #e8e8e8;
  border-radius:5px;
}
.one, .two {
  width: 5px;
  height: 12px;
  display:block;
  background-color: #FFF;
  z-index: 1;
  border-radius: 2px;
  position: absolute;
  top: -5px
}
.one {
  left: 20px
}
.two {
  right: 20px
}
.container .fe {
  width: 100%;
  height: 18px;
  top: 0;
  background-color: #1880c9;
  position: absolute;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
}

.container .sr, .container .sr2, .container .sr3 {
  height: 55px;
  position: absolute;
  box-shadow: 0 2px 5px #ededed;
  
}

.sr{text-align:center;
font-family:raleway;
  Font-size:18px;
  font-weight:bold;
  color:#2f2e2e;
  
}

.sr span {
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container .sr {
  width: 70px;
  background-color: #fcfcfc;
  overflow:hidden;
  top:18px;
  left:13px;
  z-index:3;
  
}
.container .sr2 {
  width: 65px;
  background-color: #f0f0f0;
  top:20px;
  left:15px;
  z-index:2
}
.container .sr3 {
  width: 60px;
  background-color: #e8e8e8;
  top: 23px;
  left: 18px;
  z-index: 1
}
.container .sr p {
  width: 15px;
  height: 15px;
  background-color: #6120ec;
  border-radius: 100%;
  float: left;
  margin-left: 12px;
  margin-top: 6px;
  word-wrap: break-word;
}
.container .sr p:last-child {
  visibility: hidden
}
.container .sr p:first-child {
  visibility: hidden
}
</style>

<div class="all">
<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Mon</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Tue</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Wed</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Thu</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Fri</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Sat</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div>

<div class="container">
  <span class="one"></span><span class="two"></span>
  <div class="fe"></div>
  <div class="sr"><span>Sun</span>
  </div>
  <div class="sr2"></div>
  <div class="sr3"></div>
</div></div>

Edit: Also you should think about what happens if the screen is too small. You could just add flex-wrap: wrap to .all if you want, that seems like an easy solution.