我需要解释一下为什么class.Zapasy不是在背景之后才开始的。 为什么从背景开始。 我没有使用任何填充或边距移动它。 这是默认位置，不知道为什么。 我需要知道为什么会发生这种情况，因为我也试着显示网格，结果也发生了同样的事情。
难道每个下一个元素都不应该从前面的那个元素开始吗？当我使用命令时，它会被重写吗？
null
* {
padding: 0;
margin: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 10px;
font-family: sans-serif;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
nav {
display: flex;
justify-content: space-around;
padding: 1.5rem;
width: 100%;
font-size: 1.3rem;
background-color: #cdcdcd;
}
ul {
display: flex;
}
li {
list-style-type: none;
width: 100px;
text-align: center;
}
a {
text-decoration: none;
display: block;
}
section.mobile-menu {
display: none;
}
.main-content {
width: 100%;
height: 100vh;
}
.main-content .bg {
width: 100%;
height: 100vh;
background: linear-gradient(326deg, #5596d3 0%, rgba(66, 164, 230, 0.5) 74%), url("handball.jpg") no-repeat top;
background-size: cover;
}
.zapasy {
display:flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="wrapper">
<section class="sidebar">
<nav>
<div class="brand">
<a href="#" class="nav-link">LOREM</a>
</div>
<ul class="nav-list">
<li class="nav-item"><a href="#wrapper" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#news" class="nav-link">Table</a></li>
<li class="nav-item"><a href="#novinky" class="nav-link">Player</a></li>
<li class="nav-item"><a href="#" class="nav-link">News</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</section>
<section class="mobile-menu">
<ul>
<li><a href="#wrapper"><img src="002-home.png" alt=""></a></li>
<li><a href="#news"><img src="003-handball.png" alt=""></a></li>
<li><a href="#novinky"><img src="004-group.png" alt=""></a></li>
<li><a href="#"><img src="001-newspaper.png" alt=""></a></li>
<li><a href="#"><img src="005-phone-book.png" alt=""></a></li>
</ul>
</section>
<section class="main-content">
<div class="bg"></div>
</section>
<footer class="footer">
<div class="panc-notice">
<h1>Hlavný zápas</h1>
</div>
<div class="stats">
<div class="prev-match"><h1>jijji</h1></div>
<div class="item-container">
<div class="item">
<div class="item-desc">
<img src="logo.png" alt="" class="team">
<p>sdsds</p>
</div>
</div>
<div class="item">
<div class="item-desc">
<h1 class="vysledok">dsds</h1>
<p><a href="#" class="result-link">dsdsk -></a></p>
</div>
</div>
<div class="item">
<div class="item-desc">
<img src="logo.png" alt="" class="team">
<p>dddddde</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<section id="news">
<div class="news-container">
<div class="zapasy">
<div class="team_a">Override text</div>
<div class="cas">Override text</div>
<div class="team_b">Override text</div>
</div>
<div class="league-table"></div>
</div>
</section>
</body>
</html>null
您有一个display:flex，但不在它的内部。它之前关闭了一行。将关闭的标记移动到底部，这样它就会包装您的所有内容，然后什么都不会覆盖。将我发布您的修复代码的代码Pen链接附加到它。https://codepen.io/yael-screenovate/pen/eyjeqrb？editors=1000
