Frage zum Wiki-Artikel „Flexbox“

[Bubi]

zusätzlich habe ich folgendes (da muss irgendwo der fehler liegen)

#logo {
			margin-top: 10px;
			margin-bottom: 10px;
			margin-right: 10px;
			width: 150px;
			float: left;
		}
			
		a {
			text-decoration: none;
			color: #7fb962;
			font-size: 150%;
			font-weight: bold;
			font-family: arial;
		}
			
		a:hover {
			text-decoration: underline;
		}
			
		#topbar-sec {
			float: left;
			margin-top: 20px;
			margin-bottom: 10px;
			margin-right: 10px;
			margin-left: 30px;
		}
	
		.topbar-section {
			float: left;
			border-left: 1px #827458 solid;
			margin-top: 20px;
			margin-bottom: 10px;
			margin-right: 10px;
			padding-left: 5px;
			height: 23px;
		}
			
		#kategorie {
			float: left;
			width:150px;
			margin:0 auto;
			margin-right: 1010px;
			margin-top: 50px; 
			height: 500px;
			background-color:
		}
			
		#kat_allg {
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 150px;
			background-color: #f1f1f1;
		}
		
		li a {
			display: block;
			color: #7fb962;
			padding: 8px 6px;
			text-decoration: none;
			font-size: 100%;
		}

		li a:hover {
			background-color: #7fb962;
			color: white;
			text-decoration: none;
		}
			
		#choose {
			background-color: #827458;
			color: white;
			text-decoration: none;
		}

<div class="grid-container">
		
		<div class="grid-item"><a href="https://www.-----.de" target="_blank"><img id="logo" src="images/PM_logo.png"></a></div>
		
		<div class="grid-item">
	
				<div id="topbar-sec"><a href="#"> A </a></div>
		
				<div class="topbar-section"><a href="#"> B </a></div>
		
				<div class="topbar-section"><a href="#"> C </a></div>
		
				<div class="topbar-section"><a href="#"> D </a></div>
		
				<div class="topbar-section"><a href="#"> E </a></div>
		
				<div class="topbar-section"><a href="#"> F </a></div>
		
				<div class="topbar-section"><a href="#"> G </a></div>
		
				<div class="topbar-section"><a href="#"> H </a></div>
		
				<div class="topbar-section"><a href="#"> I </a></div>
		
				<div class="topbar-section"><a href="#"> J </a></div>
		
				<div class="topbar-section"><a href="#"> K </a></div>
		
				<div class="topbar-section"><a href="#"> L </a></div>
		
				<div class="topbar-section"><a href="#"> M </a></div>
		
				<div class="topbar-section"><a href="#"> N </a></div>
		
				<div class="topbar-section"><a href="#"> O </a></div>
		
				<div class="topbar-section"><a href="#"> P </a></div>
		
				<div class="topbar-section"><a href="#"> Q </a></div>
		
				<div class="topbar-section"><a href="#"> R </a></div>
		
				<div class="topbar-section"><a href="#"> S </a></div>
		
				<div class="topbar-section"><a href="#"> T </a></div>
		
				<div class="topbar-section"><a href="#"> U </a></div>
		
				<div class="topbar-section"><a href="#"> V </a></div>
		
				<div class="topbar-section"><a href="#"> W </a></div>
		
				<div class="topbar-section"><a href="#"> X </a></div>
		
				<div class="topbar-section"><a href="#"> Y </a></div>
			
				<div class="topbar-section"><a href="#"> Z </a></div>
	</div>
	
	<div class="grid-item">
		Searchbar!
	</div>
</div>

<div class="grid-container">
	
	<div class="grid-item">
		<div id="kategorie">
			<ul id="kat_allg">
				<li><a href="#">Kategorie 1</a></li>
				<li><a href="#">Kategorie 2</a></li>
				<li><a href="#">Kategorie 3</a></li>
				<li><a href="#">Kategorie 4</a></li>
			</ul>
		</div>
	</div>
	
	<div class="grid-item">
			
	</div>
</div>

dass es nicht perfekt geschrieben ist ist mir klar, mir geht es erstmal nur um den fehler.