Оформление списка по горизонтали

Я хочу изменить вид веб-сайта с вертикального списка на горизонтальный.
Каждое изменение я скрывал свои данные. Как я могу это сделать?
css:

img {
    max-width: 600px;
    height: 200px;
    background-color: powderblue;
}
ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;

}
li{
    margin-right: 0px;
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}

html:

    <h2>store</h2>
<ul>
  <li *ngFor = "let store of stores">

    <h4>Products:</h4>
    <ul>
      <li *ngFor = "let product of store.Products">
          <img src = {{product.ProductImage}}>
          <p>store: {{ store.StoreName }}</p>
          <p>Product Price: {{ product.Price }}</p>
        <p>Product Title: {{ product.ProductTitle }}</p>

      </li>
    </ul>
  </li>
</ul> 

и внешний вид сайта: Веб-сайт