Why does this random number in CSS work?

HTML-CSS
#1

So I’m just starting on the product landing page. Im trying to format my header and am wondering why something ive stumbled upon is working.

For my header I have a img for the logo, text in for the title then and a ul of links for ‘about us’ ‘features’ and ‘pricing’.

Ive noticed when I type a number after the first line of code in my header div in CSS it aligns my ul to the right side. This is what I want but I want to know why. Im not typing any command before the number, not putting a semicolon after, literally just typing a number.

Here is the example:

Version 1 without the number.

Version 2 with the number! (its all the way at the bottom of my CSS in the header div)

I have no clue why this is working and would like to understand why.

Thanks in advance for any and all help!

#2

I think that that “random number” just breaks the CSS parsing. It doesn’t know what to do with it so it just stops. I can get the same effect with this:

header { 
  width: auto; 
}

So, it just doesn’t read any of the lines after your “mistake”. I’ve found CSS parsers to be unforgiving.

2 Likes
#3

Ahh I understand now! Thankyou!

#4

Adding to what kevinSmith said, in CSS semicolons are separators between rules, and you having a number there is parsed as:

1 display:  flex;

which is an unknown property name (1 display) so CSS just ignores everything until the closest semicolon.
You can use “Analyze CSS” command in CodePen to validate your CSS.
Also you can check in browser’s dev tools inspector how browser sees your CSS (btw, you have another typo):
Screenshot from 2022-02-01 18-58-59

2 Likes