สอบถามการใช้งาน media query หน่อยครับ รบกวนแนะนำผมที่กำลังฝึกเขียนครับ

<style>
#left_bar,#main {
	float: left;
	position: relative;

	overflow: hidden;
}

.detail {
	width: 100%;
	word-wrap: break-word;
}
@media screen and (min-width: 320px)  {
	#left_bar {
		width: 98%;
		margin: 1%;
		text-align: center;
		word-wrap: break-word !important;
	}
}

@media screen and (min-width: 320px) {
	.detail {
		text-align: center;
		word-wrap: break-word !important;
	}
}

}
@media screen and (min-width: 320px) {
	#main {
		width: 98%;
		margin: 1%;
		word-wrap: break-word !important;
	}
}

@media screen and (min-width: 800px) {
	#left_bar {
		width: 28%;
		margin: 1%;
	}
}

@media screen and (min-width: 800px) {
	#main {
		width: 68%;
		margin: 1%;
	}
}
</style>

<div id="wrap">
		<div id="main_bg">
			<div id="left_bar_bg">
				<div id="left_bar">
					<div class="detail">
						<ul>
							<li><a href="#">menu1</a></li>
							<li><a href="#">menu2</a></li>
							<li><a href="#">menu3</a></li>
							<li><a href="#">menu4</a></li>
						</ul>
					</div>
				</div>
				<div id="main">
					<div class="detail">ข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความ</div>
				</div>
			</div>
		</div>
	</div>