Я следил за видео на YouTube под названием «Курс 2020 HTML & CSS Cra sh - от макета до продукта», все в порядке и работает как надо, кроме одной вещи (которую я объясню) Однако, похоже, что проблема не возникает на веб-сайте преподавателей, хотя код точно такой же.
Итак, проблема в том, что в одном из медиазапросов (650px) селектор .companies берет на дисплей: flex, но он полностью игнорирует свойство justify-content, вырывается из контейнера и за пределы экрана, и это происходит на моем ноутбуке, настольном компьютере, и я пробовал на своем macbook подружек: то же самое во всем. Похоже, этого не происходит, это работает так, как должно, насколько я вижу. В любом случае, я приведу код ниже, а также вот ссылку на кодовый указатель учителя: https://codepen.io/designcourse/pen/bGdQGgQ Что я должен упомянуть, проблема все еще существует на моих компьютерах, но только в его видео, где это не так. не бывает (что я вижу).
Заранее спасибо, это сводит меня с ума.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
<div class="hero-wrapper">
<div class="wrapper">
<header>
<a href="#" class="logo">WebDeveloper</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="hero-content">
<h1>I help millions of people learn stuff</h1>
<p class="subtitle">Teaching UI / UX & Frontend Development</p>
</div>
</div>
</div>
<div class="light-purple-wrapper">
<div class="wrapper">
<ul class="stats">
<li>
<strong>26.5M</strong>
<span>Youtube Views</span>
</li>
<li>
<strong>535K</strong>
<span>YouTube Subs</span>
</li>
<li>
<strong>86</strong>
<span>Courses</span>
</li>
<li>
<strong>750</strong>
<span>Video Tutorials</span>
</li>
<li>
<strong>58</strong>
<span>Countries</span>
</li>
</ul>
</div>
<div class="extended-wrapper carousel-container">
<img src="images/arrow_copy_copy.svg" id="left-arrow" class="arrows" alt="">
<ul class="carousel">
<li>
<blockquote>"Gary is a life saver. I don't have the time or money for a college education. My goal is to
become a freelance web developer, and thanks to Gary, I'm really close."</blockquote>
<cite>John Doe</cite>
</li>
<li>
<blockquote>"Gary is a life saver. I don't have the time or money for a college education. My goal is to
become a freelance web developer, and thanks to Gary, I'm really close."</blockquote>
<cite>John Doe</cite>
</li>
</ul>
<img src="images/arrow_copy_copy.svg" id="right-arrow" class="arrows right" alt="">
</div>
</div>
<div class="wrapper move-up v-padding">
<h2>Companies I've worked with.</h2>
<ul class="companies">
<li><img src="images/skillshare.svg" alt="skillshare" class="skillshare"></li>
<li><img src="images/ps.svg" alt="plural sight" class="ps"></li>
<li><img src="images/skillshare.svg" alt="skillshare" class="skillshare"></li>
<li><img src="images/ps.svg" alt="plural sight" class="ps"></li>
</ul>
</div>
</body>
</html>
////// SCSS ///////
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,800&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B192F;
color: #fff;
font-family: 'Montserrat';
}
a {
color: #fff;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero-wrapper {
background: url('../images/bg_copy.jpg');
background-size: cover;
}
.wrapper {
padding: 1.5em;
max-width: 1200px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
.logo {
font-weight: bold;
}
ul {
display: flex;
li a {
padding: 0 .6em;
}
}
}
.hero-content {
margin: 4em 0 2em;
.subtitle {
margin-bottom: 0;
}
}
.light-purple-wrapper {
background: #351F3A;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
justify-content: space-around;
margin-top: 2em;
li {
margin-bottom: 1.5em;
}
strong {
font-size: 1.4em;
}
span {
display: block;
text-transform: uppercase;
font-size: .7em;
}
}
.arrows {
display: none;;
}
.extended-wrapper {
padding: 0 1.5em 2em;
max-width: 1230px;
margin: 0 auto;
}
ul.carousel {
margin-bottom: 1em;
li {
background: #422847;
padding: 1em;
margin-bottom: 1em;
}
}
blockquote {
margin: 0;
font-size: .8em;
line-height: 1.8em;
margin-bottom: 1em;
}
cite {
color:#E379FF;
font-weight: bold;
font-size: .8em;
font-style: normal;
position: relative;
padding-left: 25px;
}
cite::before {
content: " ";
position: absolute;
left: 0;
top: 6px;
height: 1px;
width: 20px;
border-bottom: 1px solid #fff;
}
h2 {
text-align: center;
position: relative;
}
h2::before {
content: "";
position: absolute;
height: 5px;
width: 30px;
background: #B728DC;
top: -.3em;
}
.companies {
text-align: center;
opacity: .4;
li {
margin: 2em 0;
}
.skillshare {
width: 100px;
}
.ps {
width: 200px;
}
}
@media (min-width: 500px) {
.companies {
display: grid;
grid-template-columns: repeat(2, auto);
}
}
@media (min-width: 650px) {
body {
font-size: 18px;
}
.wrapper {
padding: 1.5em 4em;
}
.carousel-container {
display: flex;
}
.arrows {
display: block;
width: 40px;
cursor: pointer;
margin: .5em;
}
.right {
transform: rotateZ(180deg);
}
ul.carousel {
display: flex;
margin-bottom: 0;
li {
margin-right: 1em;
margin-bottom: 0;
padding: 2em;
&:last-child {
margin-right: 0;
}
}
}
.companies {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 853px) {
body {
font-size: 20px;
}
.stats {
display: flex;
justify-content: space-between;
margin: 0;
}
.companies {
grid-template-columns: repeat(4, auto);
}
h1 {
font-size: 2.5em;
}
.subtitle {
font-size: 1.2em;
}
h2 {
text-align: left;
font-size: 2em;
}
.v-padding {
padding: 4em;
}
.light-purple-wrapper {
padding-bottom: 4em;
}
.move-up {
margin-top: -7em;
}
}
@media (min-width: 1200px) {
.stats li {
border-right: 1px solid rgb(124, 89, 148);
padding-right: 5%;
&:last-child {
border: none;
}
}
}
