В сетке CSS мой контейнер заполняет ширину экрана, а область шаблона сетки - нет: есть ли исправление для этого.Я попытался отрегулировать размер контейнера, но это только меняет положение сетки.Может ли это быть проблемой использования области шаблона сетки, поскольку эта система работает со строками шаблона сетки и столбцами шаблона сетки?
body
{
text-decoration: none;
padding: 0;
margin: 0;
font-size: 0.7vw;
font-family: 'Roboto', sans-serif;
}
h1
{
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 1200%;
margin: 0px;
bottom: 0px;
}
a
{
text-decoration: none;
color: inherit;
}
a:hover
{
color: #404040;
}
:root
{
--color-one: #cccccc;
--color-two: #8533ff;
--color-three: #f2f2f2;
--text-color: black;
}
/*Navbar*/
.navbar
{
height: 10%;
width: 100%;
background-color: var(--color-one);
font-size: 250%;
color: var(--text-color);
opacity: 0.9;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 2fr 3fr 3fr 3fr;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
.navBarItems
{
margin-top: 15px;
}
#navBarHead
{
margin-top: 12.5px;
font-size: 120%;
text-align: left;
margin-left: 20px;
}
.tutorial
{
display: grid;
width: 100%;
height: 55%;
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"b c d e"
"b c d e";
justify-content: center;
background-color: var(--color-two);
}
.topHeader
{
font-size: 250%;
color: white;
vertical-align: center;
align-self: center;
}
.video
{
background-color: var(--color-three);
font-size: 250%;
}
<html>
<head>
<title>Code !t</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto|Bree+Serif" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="htmlcss.css">
</head>
<body>
<div class="navbar">
<div id = "navBarHead"><a href src="index.html">Code !t</a></div>
<div class = "navBarItems">HTML</div>
<div class = "navBarItems">CSS</div>
<div class = "navBarItems">JAVA SCRIPT</div>
</div>
<div class = "tutorial">
<div class = "topHeader" style="grid-area: a">HTML Basics</div>
<div class = "Video" style="grid-area: b"></div>
<!--<div class = "Video"></div>
<div class = "Video"></div>
<div class = "Video"></div>-->
</div>
</body>
</html>