ارور در قسمت هدر

1401/03/09

ارور در قسمت هدر :

سلام

این دفعه دومه دارم میپرسم...

من عین شما کدارو زدم ولی هدر (قسمت content در col) 100% فضا رو نمیگیره:

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="style/fonts.css">
    <link rel="stylesheet" href="style/app.css">
    <link rel="stylesheet" href="style/grid.css">
    <link rel="stylesheet" href="style/responsive.css">

</head>
<body>
<div class="container">
	<div class="row">
		<div class="col">
			<div class="content">aa</div>
		</div>
	</div>
</div>
<script src="script/app.js"></script>
</body>
</html>

app.css

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

.body {
	font-family: "Nunito Regulsr";
}

.content {
	background-color: yellow;
	width: 100%;
	height: 100px;
}

grid.css

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
	
}

@media only screen and (min-width: 576px) {
	.container {
		max-width: 576px;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		max-width: 768px;
	}
}

@media only screen and (min-width: 992px) {
	.container {
		max-width: 992px;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1400px;
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.col {
	max-width: 100%
	flex-grow: 1;
}