Having trouble applying styles to a specific class using style.css. The structure of the class is as follows. Here's what I've attempted so far:
@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}
}
The class structure is like this:
<section id="block-system-main" class="block block-system clearfix">
<div id="node-493" class="node node-meeting node-promoted node-teaser clearfix"
Upon inspecting the element, I noticed that certain styles were automatically applied in the CSS code segment highlighted below:
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
The "section" was highlighted in blue here, indicating its significance. If I added padding-left:20px; in that part of the code, everything worked correctly. However, the reason my initial solution did not work remains unclear...