Remember those margin: auto?

FUCKING FRONTEND DEVELOPING PIECE OF SHIT.

Why the fuck does justify-content: center behaves differently on chrome, Firefox and IE?

JESUS FUCKING CHRISTMAS GET YOUR SHIT TOGETHER

Bootcrap. Just looked at their main page, and it's a whopping 75k of markup plus 294k of CSS (W-T-F?!), and 224k of JS. All of that shit for a page that shouldn't be more than 10k of markup, 16k of CSS, and that has no reason to even use JS at all.

<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none

Yeah, that crap is supposed to be "easier" to write. That's what you get for totally failing to understand how HTML/CSS even work, clinging to late 1990s practices, and ditching decades of progress since then.

Although the Bootcrap folks do manage to write valid HTML. As low as that sounds, but that counts already as an exceptional skill in the notoriously low-skilled frontend "dev" world that is all about making shitty websites.

Oh, and the rest like Failwind and Bulimia aren't any better. They already fail at delivering valid HTML on their websites.

If only it were that easy...

...

display: flex;
align-items: center;
justify-content: center;

Done!

😁

Do I know how to use flex? Mostly.
Do I know how to center a div inside a flex? Yes.
Do I know if I need to use align-items or justify-content for it? Absolutely not.

I want some help with media queries I am new and learning so please don't bash me up :

Here is my css code I want to know how to solve the issue :

/* About Section */

.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.abouttext
{
 position: relative;
 padding: 0 50px;
 height: inherit;
}

.abouttext h1
{
position: relative;
left: 230px;
}

.abouttext img{
width:20vw;
position: absolute;
top:50px;
}

.aboutlist
{
width:50%;
}

ol
{
list-style: none;
color: #e0501b;
}

ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}

li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}

li span
{
float: right;
  position: absolute;
 line-height: 25px;
 font-weight: 600;
}