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

前提・実現したいこと

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

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

エラーメッセージ

該当のソースコード

HTML
1<section class="tech-block">
2		<h2 class="heading">Technology</h2>
3			<section class="tech-item">
4				<section class="tech"><br>
5					<a href="#">
6						<img class="image" src="Images/image1.png" alt="machine">
7						<div class="category">tech-No.1</div>
8						<p class="description">We offers industrial robots in a wide range of 
9						versions with various.</p>
10					</a>
11				</section>
12		
13				<section class="tech"><br>
14					<a href="#">
15						<img class="image" src="Images/image1.png" alt="machine">
16						<div class="category">tech-No.2</div>
17						<p class="description">We offers industrial robots in a wide range of 
18						versions with various.</p>
19					</a>
20				</section>
21			</section>
22		</section>

CSS
1.h2 {
2	margin-top: 0px;
3	margin-bottom: 0.4em;
4	font-size: 1.8rem;
5	line-height: 1.3;
6	font-weight: 500;
7}
8.tech {
9	width: 500px;
10	margin-bottom: 4px;
11	padding: 8px;
12	border-bottom: 3px solid;
13	border-radius: 5px;
14	background-color: #000000;
15}
16.tech .image {
17	display: block;
18	width: 100%;
19}
20.tech .category {
21	margin: 15px 9px 10px;
22	color: #F7DC01;
23	letter-spacing: 1px;
24	font-family: "Bebas Neue",sans-serif;
25	font-size: 17px;
26}	
27.tech .category::before {
28	content: '';
29	display: inline-block;
30	width: 19px;
31	height: 19px;
32	margin-right: 5px;
33	border: 2px solid;
34	border-radius: 50%;
35	vertical-align: -5px;
36}
37.tech .description {
38	margin: 10px;
39	line-height: 1.5;
40}
41.tech > a {
42	display: block;
43	margin: -8px -8px -11px;
44	padding: 8px 8px 11px;
45	border-radius: inherit;
46	color: #FFF;
47	transition: all 0.3s;
48}
49.tech > a:hover {
50	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
51	opacity: 0.8;
52}