fixing how list are placed with html/ccs - html

Question

In the picture its shown that the 2 sets of list aren't at the same height or width. I am new to html/ccs and I cant figure how to fix it.
I've already tried to chance the margin to 0 instead of auto because i though it would solve the problem.
The line of code I've been told my mistake is placed in is this:
ul.lister {
display: inline-block;
text-align: left;
margin-top: auto;
margin-buttom: auto;
}
<ul class="lister">
<p><big>Jeg ønsker mig... (snacks edition)</big></p>
<li> FaxeKondi (gerne i ramme).</li>
<li> Saltede peanuts </li>
<li> Corny Müslibar m. banan og chokolade</li>
<li> MælkeChokolade</li>
<li> HvidChokolade</li>
</ul>
<ul class="lister">
<p><big>Jeg ønsker mig... (gavekort edition)</big></p>
<li> Sport24</li>
<li> Normal</li>
<li> Løvbjerg</p>
<li> Føtex</li>
<li> Lidl</li>
<li> Aldi</li>
<li> MacDonals</li>
<li> Netto</li>
</ul>
thanks in advance and sorry if there is some words that have been misspelled

Answer 1

First, you've got some errors in your markup: The only permitted content inside ul elements are the list item element (<li>). Inside list items you could put a <p>, but I would recommend to put the list heading outside the list for readability.
Then in your CSS, you've got margin-buttom, which should be margin-bottom.
Finally, there are several ways to put elements side by side in CSS and I will not tell you how to do that, but take a look at this article to get some ideas how you could solve it.

Answer 2

The two items aren't equal width or height because they'll only take up as much space as needed and that's dependent on the content width and height.
If you wrap each list item in a container and use display:flex then that'll make them appear side by side. You can then use flex-basis in the child elements to make them equal width. Finally putting paragraphs in unordered lists isn't great so I've separated them out and wrapped that block in divs of their own that can be sized appropriately.
CSS tricks is a good starting point for flexbox
There's also some syntax errors that I've corrected.
Also note that the big tag isn't supported in html5
See below
.container {
display: flex;
}
.lister {
flex-basis: 50%;
text-align: left;
margin-top: auto;
margin-bottom: auto;
}
<div class="container">
<div class="lister">
<p><big>Jeg ønsker mig... (snacks edition)</big></p>
<ul>
<li> FaxeKondi (gerne i ramme).</li>
<li> Saltede peanuts </li>
<li> Corny Müslibar m. banan og chokolade</li>
<li> MælkeChokolade</li>
<li> HvidChokolade</li>
</ul>
</div>
<div class="lister">
<p><big>Jeg ønsker mig... (gavekort edition)</big></p>
<ul>
<li> Sport24</li>
<li> Normal</li>
<li> Løvbjerg</li>
<li> Føtex</li>
<li> Lidl</li>
<li> Aldi</li>
<li> MacDonals</li>
<li> Netto</li>
</ul>
</div>
</div>