Imagine I have this html and css snippet
h1{
color: rgb(61, 133, 200);
font-size: 3em;
margin-left: 0px !important;
}
h1 ~ *:not(h1) {
margin-left: 0px;
}
h2{
font-size: 1.8em;
margin-left: 40px !important;
}
h2 ~ *:not(h2) {
margin-left: 40px;
}
h3{
font-size: 1.4em;
margin-left: 80px !important;
}
h2 ~ *:not(h2) {
margin-left: 40px;
}<h1>Hello First</h1>
<p>This is a paragraph that I wrote that belongs to p</p>
<p>This paragraph should also belong to the first p</p>
<h2>Tabbed</h2>
<p>I want this paragraph to be tabbed directly</p>
<p>This paragrah should be tabbed too<p>
<h3>Tabbed</h3>
<p>This should be more tabbed</p>
<p>This paragrah should be more tabbed too<p>
<h2>More Tabby</h2>
<p>This should be single tabbed</p>
<p>How tabby<p>
<h1>Return of The Title</h1>
<p> This should no longer be tabbed </p>
<p> Nor should this <p>I am struggling to apply the specified CSS style without using !important tags. How can I achieve consistent margins for all elements below a specific heading?
If you have any suggestions on how to tackle this issue, please share them!