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>