Adressing a section or class does not work

Question

I have a problem with using my styles in a certain class with my style.css. The class structure is shown below. What i tried so far to make changes is:

@media (max-width:920px)    
{
                #section         {padding-left:20px !important}
}

@media (max-width:920px)    
{
                #block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block-system-main       {padding-left:20px !important}
}

@media (max-width:920px)    
{
                .block .block-system .clearfix       {padding-left:20px !important}
}

Class structure looks like that:

    <section id="block-system-main" class="block block-system clearfix">
        <div id="node-493" class="node node-meeting node-promoted node-teaser clearfix"

When I right clicked and examined the element I found a spot in the css code, where certain styles where automatically applied to this class. It looked like that:

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

The "section" was accentuated blue here, so i guess this was the class which was important in this case. If i wrote padding-left:20px; in that part of the code, everything worked fine, but i do not understand why my solution does not work...

Answer 1

No need to write each and every time media queries for same resolution. You can combine everything into only one. Also there is no id called "section" and class called "block-system-main".

 @media all and (max-width: 920px)   
{
    section.block-system{padding-left:20px !important}
}

Just add the above one line instead of your entire code.