ボックスを横並び（２つか３つ）にしたいのですが、うまく行きません。

Question

前提・実現したいこと

webサイトを編集しています。ボックスを作り、それを横並びにしたいのですが、うまくいきません。
今はプロックレベルの要素なので縦に並んでいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<section class="tech-block">
		<h2 class="heading">Technology</h2>
			<section class="tech-item">
				<section class="tech"><br>
					<a href="#">
						<img class="image" src="Images/image1.png" alt="machine">
						<div class="category">tech-No.1</div>
						<p class="description">We offers industrial robots in a wide range of 
						versions with various.</p>
					</a>
				</section>
		
				<section class="tech"><br>
					<a href="#">
						<img class="image" src="Images/image1.png" alt="machine">
						<div class="category">tech-No.2</div>
						<p class="description">We offers industrial robots in a wide range of 
						versions with various.</p>
					</a>
				</section>
			</section>
		</section>

.h2 {
	margin-top: 0px;
	margin-bottom: 0.4em;
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: 500;
}
.tech {
	width: 500px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #000000;
}
.tech .image {
	display: block;
	width: 100%;
}
.tech .category {
	margin: 15px 9px 10px;
	color: #F7DC01;
	letter-spacing: 1px;
	font-family: "Bebas Neue",sans-serif;
	font-size: 17px;
}	
.tech .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.tech .description {
	margin: 10px;
	line-height: 1.5;
}
.tech > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #FFF;
	transition: all 0.3s;
}
.tech > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}

試したこと

desplayをgridやflexにしたりしましたが変化なしです。
また、Masonryを導入したら横並びにはなりましたがヘッダーと被ってしまいました。

補足情報（FW/ツールのバージョンなど）

<現在の状態＞
![

Answer 1

最低限

.tech-item { display: flex; }

これで横並びになります。あとはいろいろと配置の調整方法がありますので試してください。

Comments

[Kiiko1]

ありがとうございます。
解決しました♪