After reviewing the answer provided in this link, it seems to explain why certain CSS rules are greyed out in Chrome's element inspector.
In my case, however, the entire CSS rule appears to be greyed out, indicating that another rule is taking precedence over it.
The conflicting rule that is being applied is:
.view-article #g-main > div > div > div > div > div .row .col .com-content-article__body > p {
font-size: 24px;
line-height: 32.74px;
max-width: 70%;
margin: auto;
color: #334354;
}
In an attempt to make my rule more specific, I added an extra class selector to it as shown below. I even tried using !important, but without success:
.outline-19 .view-article #g-main > div > div > div > div > div .row .col .com-content-article__body > p {
margin-left: 0;
width: 100%;
}
You can view the page I am working on here. The content seems to flow below the image (the blue square), which is not the desired outcome.
https://i.sstatic.net/UVXXf.png
Given that the selector seems correct as the rule appears in the stylesheet, I cannot understand why my rule is not being applied. Any insights would be greatly appreciated!