div tidak bisa berada diatas background

ini saya mau ngikutin tutorial sekolah koding yg bab membuat portofolio online dengan photoshop. ini di html :

 <div id="pertama">

		<div id="header">
			<img src="Untitled-1.jpg" id="logo" alt="logo">
		<div id="menu">
			<div class="konten">
				<a href="#pertama" class="kolom_3"> Hallo </a>
				<a href="#kedua" class="kolom_3" class="kolom_3_tengah"> Karya </a>
				<a href="#ketiga" class="kolom_3"> Kontak </a>
			</div>
		</div>
		</div>
	</div>

	<div class="clear"> </div>

	<div class="konten">

		<div id="box_sd">

			<h1>Selamat Datang <br> di Website Sekolah Koding</h1>
			<a href="#kedua"> Lihat Karya </a>

		</div>
		</div>

	</div>

dan ini di css :

 #box_sd{
	background-color: black;
	color: white;
	font-size: 30px;
	text-align: center;
	margin: 80px 0;
	padding: 20px 0;
}

#box_sd a{
	display: block;
	border: 2px solid white;
	color: white;
	padding: 5px;
	width: 300px;
	margin: 25px auto 0 auto;
}

#box_sd a:hover{
	background-color: grey;
	color: black;
}

disekolah koding div selamat datangnya berada diatas background, tapi saya kok dibawah backgroundnya.

Mohon bantuannya, Terimakasih.