So I'm making a Tic Tac Toe game and flex box isn't doing what it's suppose to

HTML-CSS
1

I have the same exact code as this guy and my squares are aligned top to bottom, not like his. Does this work for anyone else? I checked for typos and there aren’t any. How?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Affordable and professional web design">
	  <meta name="keywords" content="web design, affordable web design, professional web design">
  	<meta name="author" content="Brad Traversy">
    <title>Acme Web Deisgn | Welcome</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
		<article>
			<section>
				
				<div class="board-container flex-container flex-column">
					<div class="board flex-container"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
						<div class="square"></div>
					</div>
				</div>
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			</section>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		</article>


































    </header>


    <footer>
      <p></p>
    </footer>
  </body>
  <script src="js.js">
  </script>
</html>


.flex-container {
	display: flex;
}

.flex-column{
	flex-direction: column;
}

.board-container {
	height: 100%;
	width: 100%;
}

.square {
	width: 100px;
	height: 100px;
	border: 3px solid black;
}



.board {
	width: 300px;
	
}

He has a class of .board but has no class=“board” in his HTML. same with .square. What the ???

2

Well, you have incorrect HTML (are you beginning to see a pattern here?).

You have a container that does not contain anything as it has been closed.

<article>
  <section>
    <div class="board-container flex-container flex-column">
      <div class="board flex-container"></div> <!-- Empty closed container -->
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    </div>
  </section>
</article>

Like so:

<article>
  <section>
    <div class="board-container flex-container flex-column">
      <div class="board flex-container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>
    </div>
  </section>
</article>
3

Back to basics. Remember, the computer is never wrong.