In global.css line 60 I have a padding-right of 25 pixels.
In my internal style sheet I have the same rule at line 6 under a media-query for my iPhone Portrait
If I go into Firefox dev tools and cancel the first item line 6 in the internal style sheet why does the padding right in global.css line 60 then come into play and thus override. I thought any rule in an internal style sheet overrides the same rule in external style sheet - am I right?
forgot to add this image
It's probably the 2 that are causing you issues? There is zero need to use to create spaces between items.
The rule of thumb is as follows:
The last stylesheet in the list takes priority over previous stylesheets above it.
Embedded styles (in the document <head> and <style> tags) take priority over external stylesheets above it.
Inline styles (in the HTML markup) take priority over Embedded and External stylesheets above it.
Hope that helps.
thanks to everyones advice. It's made me look again at the question and it seems I confused myself as I tried to disable the rule. Now I see the cascade was working correctly and I ought to have been focusing on why the rule as coded was not doing what I wanted - thanks anyway