On my HTML game website, I feature multiple UL lists at the bottom of each page:
<h2>How to play?</h2>
<ul>
<li><a href="/en/ws/google">Via Google</a></li>
<li><a href="/en/ws/apple">Via Apple</a></li>
<li><a href="/en/ws/facebook">Via Facebook</a></li>
<li><a href="/en/ws/amazon">Via Amazon</a></li>
<li><a href="/en/ws/huawei">Via Huawei</a></li>
</ul>
The lists are currently displayed one after another:
https://i.sstatic.net/ik7Ua.png
In certain Wordpress themes, I noticed that the lists are positioned close together when the webpage width allows for it:
https://i.sstatic.net/350UR.png
Is there a CSS tip or trick someone could suggest for achieving this layout?
It's challenging to figure out how Wordpress does it, and searching hasn't yielded helpful results due to common keywords.
UPDATE:
I followed the suggestion (now deleted) from Majicman02 (thank you!) and experimented with Flexbox:
#footer {
display: flex;
flex-wrap: wrap;
}<div id="footer">
<h2>How to play?</h2>
<ul>
<li><a href="/en/ws/google">Via Google</a></li>
<li><a href="/en/ws/apple">Via Apple</a></li>
<li><a href="/en/ws/facebook">Via Facebook</a></li>
<li><a href="/en/ws/amazon">Via Amazon</a></li>
<li><a href="/en/ws/huawei">Via Huawei</a></li>
</ul>
<h2>Mobile game version</h2>
<ul>
<li><a href="/en/ws/android">For Android</a></li>
<li><a href="/en/ws/ios">For iOS</a></li>
</ul>
<h2>Where to talk?</h2>
<ul>
<li><a href="https://facebook.com/groups/12345/">At Facebook</a></li>
</ul>
<h2>Other languages</h2>
<ul>
<li><a href="/de/ws">My word game (German)</a></li>
<li><a href="/ru/ws">My word game (Russian)</a></li>
</ul>
<h2>Legal documents</h2>
<ul>
<li><a href="/en/ws/tos">Terms of service</a></li>
<li><a href="/en/ws/privacy">Privacy policy</a></li>
<li><a href="/de/ws/imprint">Impressum</a></li>
<li><a href="/de/ws/dsgvo">Datenschutzerklärung</a></li>
</ul>
</div>The outcome appears favorable as it utilizes the entire webpage width.
Any suggestions on how to ensure the h2 header stays above the ul lists?