Возникла проблема с 'Grid'

146

22 апреля 2019, 22:50

Доброе утро, хочу обратиться за помощью с Grid. Никак не могу понять, почему элементы из меню прячуться/уходят за блок main?

* { 
	padding: 0; 
	margin: 0; 
} 
 
.main-container { 
	display: grid; 
	grid-template-rows: 10% 60% 30%; 
	grid-template-columns: 350px 1fr 250px 100px; 
	grid-template-areas:  
	"header nav aside aside" 
	"main main main empty" 
	"chat chat chat empty"; 
	max-width: 100%; 
	height: 100vh; 
	grid-gap: 1px; 
} 
 
.header { 
	grid-area: header; 
	background: #a2a2a2; 
} 
 
/*-------------------------------МЕНЮ---------------------------*/ 
.nav { 
	grid-area: nav; 
	display: grid; 
	background: #a2a2a2; 
} 
 
.nav ul, .aside ul { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-around; 
	width: 100%; 
	list-style-type: none; 
} 
 
.nav li, .aside li { 
	padding-top: 3px; 
} 
 
.nav a, .aside a { 
	display: inline-block; 
} 
 
.nav #circle { 
	width: 85px; 
	height: 85px; 
	-moz-border-radius: 50px; 
	-webkit-border-radius: 50px; 
	border-radius: 100px; 
	border: 1px solid black; 
} 
 
.nav ul:hover li > a { 
	background: #382b2b 
} 
 
.nav ul li a { 
	background: #424242; 
	transition: all .2s ease-in-out; 
} 
 
.nav ul li a:hover { 
	background: #676767; 
	margin-top: 10px; 
} 
/*--------------------------------КОНЕЦ МЕНЮ-----------------------*/ 
 
/*--------------------------------ПАНЕЛЬ И КНОПКИ------------------*/ 
.aside { 
	grid-area: aside; 
	display: grid; 
	background: #a2a2a2; 
} 
 
.aside #panel { 
	width: 150px; 
	height: 80px; 
	background: #707070; 
	border: 1px solid #000; 
	border-radius: 20px; 
} 
 
.aside #option img { 
	width: 80px; 
	height: 80px; 
	text-align: center; 
} 
 
.aside #exit img { 
	width: 80px; 
	height: 80px; 
	text-align: center; 
} 
/*---------------------------------КОНЕЦ ПАНЕЛИ И КНОПОК-------------*/ 
 
.main { 
	grid-area: main; 
	background: grey; 
} 
 
.chat { 
	grid-area: chat; 
	background: #d1d1d1; 
} 
 
.empty { 
	grid-area: empty; 
	background: #d1d1d1; 
 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
	<meta charset="UTF-8"> 
	<title>Maket</title> 
</head> 
<body> 
	<div class="main-container"> 
		<div class="header"></div> 
		<div class="nav"> 
			<ul> 
				<li><a id="circle" href=""></a></li> 
				<li><a id="circle" href=""></a></li> 
				<li><a id="circle" href=""></a></li> 
				<li><a id="circle" href=""></a></li> 
				<li><a id="circle" href=""></a></li> 
				<li><a id="circle" href=""></a></li> 
			</ul> 
		</div> 
		<div class="aside"> 
			<ul> 
				<li><div id="panel"></div></li> 
				<li><a id="option" href=""><img src="option.png" alt="option" class="option"></a></li> 
				<li><a id="exit" href=""><img src="exit.png" alt="exit" class="exit"></a></li> 
			</ul> 
		</div> 
		<div class="main"></div> 
		<div class="chat"></div> 
		<div class="empty"></div> 
	</div> 
</body> 
</html>