Why doesn't CSS text-align:left work with Simplebar?

Question

I've encountered a problem with text-align:left: my messages(text) don't align to the left. I've tried several things so far: adding width:100%, float:left and also display:block. Unfortunately, none of them worked. I was thinking that probably simplebar affects it though I can't figure out how then. Would be so grateful if you could help me somehow! Here is my CSS and HTML:

<h2 id="receiver" name="{{receiver}}">Chat with {{receiver}}</h2>
    <div data-simplebar id="my-element" class="history">
      {% for message in hist_list %}
        {{message}}<br>
      {% endfor %}
    </div>

.history {
  position: absolute;
  top: 210px;
  left: 249px;
  transform: translate(-50%, -50%);
  height: 416px;
  text-align:left;
  width:100%;
}
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  text-align: center;
  font-family: 'Exo', sans-serif;
  color: black;
}

This is Simpebar which might interfere with my CSS:

[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

Answer 1

I think you should remove text-align:center; from universal selecter. Hope below snippet helps.

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
/*   text-align: center; */
  font-family: 'Exo', sans-serif;
  color: black;
}
#receiver{
  text-align:center;
}

.history {
  position: absolute;
  height: 416px;
  text-align:left;
  width:100%;
}


[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

<h2 id="receiver" name="">Chat with Name</h2>
<div data-simplebar id="my-element" class="history">
  <p>This is a message</p><br>
  <p>This is a message</p><br>
</div>

Answer 2

SO there is a small thing you can do to fix your problem, just call your universal selector code above all the things,

just like this,

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  text-align: center;
  font-family: 'Exo', sans-serif;
  color: black;
}
.history {
  position: absolute;
  top: 210px;
  left: 249px;
  transform: translate(-50%, -50%);
  height: 416px;
  text-align:left;
  width:100%;
}

CSS is cascading and it gives prefrence to the code which is written after, just see this small example

p {color: red; font-size: 100px;}
p {color: green; font-size: 50px;}

<p>Test</p>

So in the given example, code which is written below, I.e the color green's one, will get the preference, So its good practice to write the universal selector at top of your code and then use all the other thing which you want to over write below it.

Answer 3

just remove transform and absolute

.history {
    /* position: absolute; */
    /* top: 210px; */
    /* left: 249px; */
    /* transform: translate(-50%, -50%); */
    height: 416px;
    text-align: left;
    width: 100%;
}