HELP: Text does not want to be centered properly

[BlazingCobaltX]

For my site I am using a premade template that has some odd quirks. One in particular is that, when using <center>, text doesn't fully center according to the box but according to the span of the text. Example page here.

Relevant (I think) CSS:

Code

.container{
display: flex;
flex-direction: column;
margin-left: 200px;
}
 
.boxgap{
display: flex;
flex-direction: column;
gap: 1rem;
}
 
.box{
display: flex;
flex-direction: row;
background-color: #fffefc;
border: 3px solid #967e68;
}

.left{
border-right: 3px solid #967e68;
padding: 0.7rem;
text-align: center;
}

.right{
padding: 1rem;
}

I've tried editing the display from flex to something else but the CSS seems highly unresponsive (same issue with changing font sizes). The only fix I've found is to make an entirely different div. This one somehow allows itself to be centered. What is happening?

Code

.scrollbox{
display: block;
flex-direction: row;
background-color: #fffefc;
border: 3px solid #967e68;
height: 500px;
overflow: auto;
}

Many thanks in advance.

[TheNothingMonster]

<center> will act a bit strangely when working with flex properties. It's a kind of tag that is not really needed (nor suggested) when working with certain CSS stylings.

Whenever you want to center a div, I suggest you adding margin-right: auto; & margin-left: auto; to its properties.

Since the content you want to center are inside the ".right" div, you can just add these properties to it. That should do it!

Code

.right{
  padding: 1rem;
  margin-right: auto;
  margin-left: auto;
}

If something is not working for you, let me know!

[BlazingCobaltX]

<center> will act a bit strangely when working with flex properties. It's a kind of tag that is not really needed (nor suggested) when working with certain CSS stylings.

Whenever you want to center a div, I suggest you adding margin-right: auto; & margin-left: auto; to its properties.

Since the content you want to center are inside the ".right" div, you can just add these properties to it. That should do it!

It worked!! Learned something again, thank you very much