List formatting in HTML

Issue

The Web Page

The HTML code

The CSS code

(I don't really understand how to post the code here - sorry)

I am a beginner in HTML and StackOverflow. Today is my first time using StackOverflow. I had a question about formatting my lists in HTML. I want to have 2 lists be next to each other but in the center of the screen. I have 2 lists side-by-side but can't figure out a way to get it into the center. Help would be greatly appreciated.

<div class="what">
    <ul style="font-size: 125%; font-family: 'Courier New', Courier, monospace; font-weight: bold; ">
      <li>Sterling Silver Jewelry</li>
      <li>Copper Jewelry</li>
      <li>Beaded Jewelry</li>
      <li>Bone Jewelry</li>
      <li>Home Furnishings</li>
      <li>Flutes</li>
      <li>Music</li>
      <li>Books</li>
      <li>Pendleton Items</li>
  </ul>

  <ul style="font-size: 125%; font-family: 'Courier New', Courier, monospace; font-weight: bold;">
      <li>Lamps</li>
      <li>Rugs/Placemats</li>
      <li>T-Shirts</li>
      <li>Candle Holders</li>
      <li>Teas</li>
      <li>Soaps</li>
      <li>Balms</li>
      <li>And much more</li>
    </ul>
</div>

Solution

You're 90% there; you just need to use justify-content to position the contents of your flex container along the horizontal-axis. align-items is for positioning on the vertical-axis (note: both of these rules are reversed if you switch your flex-direction to column, btw).

.listContainer {
  display: flex;
  justify-content: center;
}

<div class="listContainer">
  <ul>
    <li>Sterling Silver Jewelry</li>
    <li>Copper Jewelry</li>
    <li>Beaded Jewelry</li>
    <li>Bone Jewelry</li>
    <li>Home Furnishings</li>
    <li>Flutes</li>
    <li>Music</li>
    <li>Books</li>
    <li>Pendleton Items</li>
  </ul>
  <ul>
    <li>Lamps</li>
    <li>Rugs/Placemats</li>
    <li> T-Shirts</li>
    <li>Candle</li>
    <li>Holders</li>
    <li>Teas</li>
    <li>Soaps</li>
    <li>Balms</li>
    <li>And much more</li>

  </ul>
</div>

I'd recommend reading up a little more on flexbox to get your confidence up when using it -- it has a lot of useful properties!

Answered By - Marco