Tribute page align problem

1

Hello everybody I need some help about the senteces on my “ul” tag. I wrote these codes below but even then I can’t align the sentences to left. Can somebody explain what I’m doing wrong? Thank you.
ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
text-indent:0;
line-height: 50px;
}
https://codepen.io/halilciftci-the-typescripter/pen/bGEjzbg

2

It’s a good question.

The reason why you can’t fix that, is because of the way CSS works. Let’s see first an example.

Example

div  {color:red;}

div p {color:blue}

Before reading further on, answer this to yourself:

  • Which color will the paragraph be?

Now, if we replace this with a ul we have:

ul {text-align:left}

ul li {text-align:center}

(in this case we could write ul > li)
Then:

  • Which alignment will the li's be?

In conclusion:

When we have a style for the parent, and the same style for the children, all styles are overwritten.

So…either remove the ul li {text-align:center} or set it to ul li {text-align:left}

1 Like
3

So I can spot a few problems,
First you should try to really make your indentation correctly (I’m having a hard time reading those few lines already :slight_smile: )
So you have declared two times @media (max-width: 460px), which means everything in the second one is not applied (that’s why li { text-align: left;} doesn’t work)

1 Like
5

Thanks a lot.
I tried the fixing my indentations and solved my problem. I hope they are more readable now.
Here’s a link if you want a check it out: https://codepen.io/halilciftci-the-typescripter/pen/bGEjzbg

6

Thank you for ansewring.
Apparently the reason my codes don’t work was my double declaring the @media tag. But thanks to you now I understand better the property selecting.

7

No worries !
But yeah saying ul li { text-align: left; } then li { text-align: left; } is practically the same.
The difference is with the second one, li { text-align: left; } you say that any li in your page needs to align left while with the first one you say that any li children of a ul will be text-align: left.
I hope this is clear enough…

1 Like