Unordered list settings

why would my unordered list be going side by side?
https://captureability.com/tech9.html

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capture Ability-The Power of The Iphone</title>
	<style>ul {
            list-style-type: none;
            margin: 0;
            padding-left: 40px;
            display: flex;
            justify-content: left; /* Centers the nav items horizontally */
            background-color: #fff;
        }</style>
   
</head>
<body>
	
<div class="container">
 <ul>
	    <li><a href="index.html">About</a></li>
        <li><a href="inspirational.html">Inspirational</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)">Technology</a>
            <div class="dropdown-content">
                 <a href="tech1.html">The Power of The Iphone</a>
                <a href="tech2.html">Wheelchair Camera Mount</a>
                <a href="tech3.html">Outdoor Camera Mount</a>
				<a href="tech4.html">Mini Tripod's</a>
				<a href="tech5.html">Fixed Lens Camera’s</a>
				<a href="tech6.html">Creating a New Device</a>
				<a href="tech7.html">The Accessible Tripod</a>
				<a href="tech8.html">Window Photography</a>
            </div>
        </li>
        
        <li><a href="contact.html">Contact</a></li>
    </ul>
<div style="text-align: left">
  <img src="images/camerawheel.jpg" alt="camera being held to the side of a wheelchair" align="middle">
</div>
<h1>Capture Ability</h1><a>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</a>
	<hr>
	<h3>&nbsp;</h3>
	      
<h4>Choosing the best accessible camera for a person with disabilities  July 18, 2024</h4>	
<p>Choosing the best accessible camera for a person with disabilities involves considering their specific needs and challenges. Here are some options that cater to different types of disabilities:</p>
<p><strong>For Users with Limited Mobility or Dexterity:</strong></p>	
<ol>
  <li><strong>Canon PowerShot G7 X Mark III</strong></li>
</ol>
<ul>
  <li>Compact and lightweight</li>
  <li>Touchscreen interface for easy control</li>
  <li></li>
</ul>  	
<p>One of the key factors that sets iPhone photography apart is its accessibility. Almost everyone carries a smartphone with a capable camera in their pocket, eliminating the need for bulky camera equipment. This accessibility has democratized photography, allowing individuals from all walks of life to explore their creativity and document their experiences.</p>
<p>The advancements in computational photography have been a game-changer for iPhone photography. Features like Smart HDR, Night mode, and Portrait mode showcase Apple's dedication to blending hardware and software to produce stunning images. These technologies work together to capture better dynamic range, enhance low-light shots, and create professional-looking bokeh effects.</p>
<p>The App Store further enriches the iPhone photography experience. With a plethora of photo editing apps available, users can fine-tune their images right on their devices. From basic adjustments like exposure and contrast to more intricate tasks like retouching and compositing, these apps empower users to take full control of their creative vision.</p>
<p>Social media platforms like Instagram have played a significant role in popularizing iPhone photography. The ease of capturing, editing, and sharing images directly from the same device has accelerated the growth of visual storytelling. Influencers, artists, and photographers have gained immense followings by showcasing their unique perspectives through iPhone-captured imagery.</p>
<p>However, while the iPhone has undoubtedly transformed photography, it's important to remember that the device is just a tool. The fundamentals of photography—composition, lighting, subject, and storytelling—remain essential. Regardless of the technology, an eye for detail and a creative approach are what truly make photographs stand out.</p>
<p>In essence, iPhone photography is more than just a trend; it's a cultural shift that has redefined how we perceive and engage with images. As the technology continues to evolve, so too will our ability to capture and convey the world around us, all from the convenience of our pocket-sized devices.</p>
 
 
<hr>
	<div>
	</div>
	&nbsp;
<footer align="center">
  <p>&copy; 2024 Capture Ability. All rights reserved.</p>
</footer>
</body>
</html>

you have display flex it makes a row

I added my css into my html for my unordered list and it works. the only problem is my list is going horizontal and not vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture Ability - The Power of The iPhone</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
	
	
	
  <style>
    ul.story {
      list-style-type: none;
      margin: 0;
      padding: 0;
      justify-content: left; /* Aligns the list items to the left */
      background-color: #fff;
    }
    li {
      position: relative;
    }
    li a {
      display: block;
      color: #800020;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    li a:hover {
      background-color: #fff;
    }
  </style>
	
	
</head>
<body>
  <div class="container">
    <ul>
      <li><a href="index.html">About</a></li>
      <li><a href="inspirational.html">Inspirational</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)">Technology</a>
        <div class="dropdown-content">
          <a href="tech1.html">The Power of The iPhone</a>
          <a href="tech2.html">Wheelchair Camera Mount</a>
          <a href="tech3.html">Outdoor Camera Mount</a>
          <a href="tech4.html">Mini Tripods</a>
          <a href="tech5.html">Fixed Lens Cameras</a>
          <a href="tech6.html">Creating a New Device</a>
          <a href="tech7.html">The Accessible Tripod</a>
          <a href="tech8.html">Window Photography</a>
        </div>
      </li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div style="text-align: left">
      <img src="images/camerawheel.jpg" alt="camera being held to the side of a wheelchair">
    </div>
    <h1>Capture Ability</h1>
    <p>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</p>
    <hr>
    <h4>Choosing the best accessible camera for a person with disabilities - July 18, 2024</h4>
    <p>Choosing the best accessible camera for a person with disabilities involves considering their specific needs and challenges. Here are some options that cater to different types of disabilities:</p>
    <h3><strong>For Users with Limited Mobility or Dexterity:</strong></h3>
    <ul class="story">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <hr>
    <footer style="text-align: center">
      <p>© 2024 Capture Ability. All rights reserved.</p>
    </footer>
  </div>
</body>
</html>

Give it a space between ul and class story or a comma.

that doesn’t do anything.

show any picture as a example. how do you want your unorder list.

give it flex-directionvalue column. or try to give it flex-wrap value wrap.