Ignoring sublist in css - html

Question

So I am trying myself in html and css3 and I found a problem described in pictures:
What I have
What I want
So what I want to do is to ignore that the textfield of "Concepts" shifts "Planets" to the right.
This is how the html structure looks like at the moment:
HTML:
<div class="masthead__inner-wrap">
<li class="masthead_menu-item">
<ul subhead-links>
<li class="subhead-link">
</li>
</ul>
</li>
</div>
CSS:
.masthead__menu-item {
display: block;
list-style-type: none;
white-space: nowrap;
&--lg {
padding-right: 2em;
font-weight: 700;
}
}
.subhead-links{
border-radius: 0.2em;
border: 2px solid #73AD21;
border-color: $border-color;
position: relative;
clear: both;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
}
.subhead-link {
font-size: $type-size-7;
display: block;
list-style-type: none;
white-space: nowrap;
&--lg {
padding-right: 1em;
font-weight: 700;
}
}
So what I do is fill the subhead links in as listitems (via liquid) and then display them as subhead-links.
But I do not know how to ignore the "subhead" listitems so that the next masthead__menu-item is not shifted.
Thank you!

Answer 1

Do you want something like this?
.masthead_menu-item li{display:inline;}
.sublist li{display:none;}
.sublist:target li{
display:inline;
}
<div class="masthead__inner-wrap">
<ul class="masthead_menu-item">
<li>Concepts</li>
<li>Planets</li>
</ul>
<ul class="sublist" id="concepts_sublist">
<li>Waves</li>
<li>Magic</li>
</ul>
<ul class="sublist" id="planets_sublist">
<li>Planet1</li>
<li>Planet2</li>
</ul>
</div>

Answer 2

If you're only trying to target the direct descendent (not all children) then use the (child selector)[https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors]
For example:
.masthead_menu-item > a {
color: green; /* Will not affect <li><a>...</a></li> */
}
However, I get the feeling that's not what you're really asking. The HTML you've posted doesn't really mirror your before/after graphics.
For a more specific answer, please post your markup and CSS