The HTML body is set to text-alignment = center. I know this is not the best approach and I may change in the future as this is giving me a lot of headaches, but my whole website was designed based on this, so I would not like to change this set up right now.
I would like to have a box centered middle, but everything inside that box set to left. at the moment everything inside that box is also set to center. even though the box elements are text-aligment= left.
CSS:
.centerAddress{
width: 40vw;
height: auto;
text-align: left;
}
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
<div class="centerAddress">
<p style="margin-top: 5%">test</p>
<p>testt</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
You can try using !important
to trump css specificity
.centerAddress{
width: 40vw;
height: auto;
text-align: left !important;
}
Refer here for more details
Or you can target all child elements inside the .centreAddress
box by using the *
selector
.centerAddress * {
text-align: left;
}