How can align my elements on the left side of the page?

I am a new programmer and I recently started following a music-player tutorial, and am experiencing a couple of styling issues with it.

Project Overview:

As previously described, it is a music-player project made with create-react-app. The objective is to click the image of the song of your choosing, and for the song to be played for you.

The Problem: Currently they are in a column, aligned in the center. How can I line the images of the songs on the left side of the page? I tried doing a couple of things on my css file named Turkish.css(shown below) like:

• align-items: flex-start
• justify-items: flex-start;

However they did not do anything.

The Code:

Turkish.js (the music-player file):

import React, { Component,useRef, setStatus, status } from 'react';
import './Turkish.css';

import turk1 from "./music/turk1.mp3";
import turk2 from "./music/turk2.mp3"
import turk3 from "./music/turk3.mp3"
import turk4 from "./music/turk4.mp3"

export default function Turkish() {
const data = [
    { imgSrc: 'turk1.png', audioSrc: turk1 },
    { imgSrc: 'turk2.png', audioSrc: turk3 },
    { imgSrc: 'turk3.png', audioSrc: turk4 },
    { imgSrc: 'turk4.png', audioSrc: turk2 },
  ];
  

      return (
        <div className='Turkish'>
          <ol>
            {data.map(({ imgSrc, audioSrc }) => (
              <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
            ))}
          </ol>
        </div>
      );
    }
  
  
  const MediaComponent = ({ imgSrc, audioSrc }) => {
    const audioRef = useRef(null);
    const toggleAudio = () =>
      audioRef.current === null
        ? console.log("Audio component is not loaded yet.")
        : audioRef.current.paused
        ? audioRef.current.play()
        : audioRef.current.pause();

        
            return (
              <ol>
                <img src={imgSrc} onClick={toggleAudio} />
                <audio
                  ref={audioRef}
                  src={audioSrc}
                  onLoad={() => setStatus({ ...status, isLoaded: true })}
                  onPlay={() => setStatus({ ...status, isPlaying: true })}
                  onPause={() => setStatus({ ...status, isPlaying: false })}
                  onError={() => setStatus({ ...status, error: true })}
                />
              </ol>
            );
          };
 

Turkish.css

.Turkish ol {
    cursor: grab;
    border: solid;
    border-color: #303030;
    border-width: 0.01px ;
    border-left: transparent;
    border-right: transparent;
    border-bottom: transparent;
   
}

Let me know what you think!

Thank You,

-Zpo