Grid text alignment

[DermotMW]

Hi,

Using a grid on a webpage but the text ALWAYS is centred - why?

.gridsidebarleft {
background-color: lavender;
display: grid;
grid-gap: 5px;
padding: 5px;
text-align: left;
grid-template-columns: 2fr 3fr;
grid-template-areas:
'a b';
}
.sideleft {
grid-area: a;
border-style: solid;
border-color: black;
}

.panel {
grid-area: b;
border-style: solid;
border-color: black;
}


<div class="gridsidebarleft">

<div class="sideleft">
<h3>The sidebar</h3>
<p>
Some meaningless text to see how this works.
It should be left-aligned, but might not be.
</p>
<p>
Some more just to make it visually better.
</p>
</div>

<div class="panel">
<h3>The main panel</h3>
</div>
</div>

How do I force the text to align correctly?

TIA,

Dermot

 

[sunfighter]

The code you provided works just fine. The image shows more then the code resolves to when I run it. IE.: The blue tag line stuff does not appear. So something else in your code is causing the problem. I would comment out all the CSS except for the three rules you show - things should be good for that small section of the HTML in your browser. Then slowly add a rule - one at a time until your text centers.