I am struggling with aligning my three inline-block lists on the screen. I want the last two lists to be moved to the right, while still maintaining their original markup order.
The problem arises when the third list appears before the second list in the layout.
What could be causing this issue?
ul {
display: inline-block;
}
ul:nth-child(2),
ul:nth-child(3) {
color: red;
float: right
}<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
</ul>