НЕ работает max-width в блоке .profile__content. Что делать и где я допустил ошибку?
@import "sass-def/@imports";
@import "style";
// HEADER
.header {
overflow: visible;
background: none;
}
// PROFILE
.profile {
margin-top: 55px;
&__container {
@include container;
}
&__start {
text-align: center;
}
&__title {
@include small-title($light-color);
font-weight: 600;
}
&__exit {
@include text($secondary-color);
font-size: 1.5rem;
}
&__content {
max-width: 396px;
&_wrapper {
@include flex;
}
&_title {
width: 90%;
font-weight: 500;
font-size: 1.5rem;
color: $primary-color;
background-color: $dark-bg-color;
padding: 15px;
margin: 0 auto;
text-align: center;
position: relative;
&::before {
content: "";
position: absolute;
height: 100%;
width: 20px;
left: 0;
top: 50%;
transform: translateY(-50%) translateX(-20px);
background: linear-gradient(
to left top,
$dark-bg-color 50%,
transparent 53%
);
}
&::after {
content: "";
position: absolute;
height: 100%;
width: 20px;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(20px);
background: linear-gradient(
to right bottom,
$dark-bg-color 50%,
transparent 53%
);
}
}
}
&__item {
@include flex;
&_container {
display: flex;
flex-direction: column;
row-gap: 65px;
margin-top: 53px;
}
&_title {
font-weight: 400;
font-size: 2rem;
color: $light-color;
}
&_text {
font-weight: 400;
font-size: 1.25rem;
color: $secondary-color;
}
&_prise {
font-weight: 600;
font-size: 2rem;
color: $primary-color;
margin-top: 19px;
}
}
&__img {
width: 100%;
height: 100%;
&_wrapper {
max-width: 164px;
max-height: 163px;
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/profile.min.css" />
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__container">
<div class="header__row">
<div class="header__row_start">
<div class="header__search_wrapper">
<div class="header__burger_wrapper">
<label class="header__burger">
<span class="header__burger_item"></span>
</label>
</div>
<label class="header__search">
<button class="header__search_btn">
<img
src="img/search.svg"
alt=""
class="header__search_ico"
/>
</button>
<input
type="search"
class="header__search_input"
placeholder="Пошук"
/>
</label>
</div>
<div class="header__logo_wrapper">
<img src="img/logo.svg" alt="" class="header__logo" />
</div>
<div class="header__profile">
<div class="header__lang_wrapper">
<label class="header__lang">
<input
type="radio"
class="header__lang_item"
name="lang"
checked
/>
<p class="header__lang_text">UA</p>
</label>
<span class="header__lang_line"></span>
<label class="header__lang">
<input type="radio" class="header__lang_item" name="lang" />
<p class="header__lang_text">RU</p>
</label>
</div>
<div class="header__user">
<a href="profile.html" class="header__user_link">
<img src="img/cart.svg" alt="" class="header__user_ico" />
</a>
<a href="login.html" class="header__user_link">
<img src="img/like.svg" alt="" class="header__user_ico" />
</a>
</div>
</div>
</div>
<nav class="header__nav">
<ul class="header__menu">
<li class="header__menu_item header__menu_active">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
<li class="header__menu_item">
<a href="#" class="header__menu_link">Категорія</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main class="main">
<section class="profile">
<div class="profile__container">
<div class="profile__start">
<h2 class="profile__title">Профіль</h2>
<a href="#" class="profile__exit">Вийти</a>
</div>
<div class="profile__content_wrapper">
<div class="profile__content">
<h3 class="profile__content_title">Історія замовлень</h3>
<div class="profile__item_container">
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/yellow__hoodie.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/yellow__hoodie.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/yellow__hoodie.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
</div>
</div>
<div class="profile__content">
<h3 class="profile__content_title">Обране</h3>
<div class="profile__item_container">
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/white__tshirt.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/white__tshirt.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
<a href="card_open.html" class="profile__item">
<div class="profile__img_wrapper">
<img
src="img/white__tshirt.png"
alt=""
class="profile__img"
/>
</div>
<div class="profile__cta">
<h3 class="profile__item_title">Жовте худі</h3>
<p class="profile__item_text">худі, одяг</p>
<h2 class="profile__item_prise">1199.00 грн</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<div class="footer__start">
<div class="footer__logo_wrapper">
<img src="img/logo.svg" alt="" class="footer__logo" />
</div>
<div class="footer__sm">
<a href="#" class="footer__sm_item">
<img src="img/telegram.svg" alt="" class="footer__sm_ico" />
</a>
<a href="#" class="footer__sm_item">
<img src="img/insta.svg" alt="" class="footer__sm_ico" />
</a>
</div>
</div>
<nav class="footer__menu">
<ul class="footer__list">
<li class="footer__list_item">
<h3 class="footer__list_title">Інформація</h3>
</li>
<li class="footer__list_item">
<a href="catalog.html" class="footer__list_link">Каталог</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Про нас</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Доставка і оплата</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Повернення</a>
</li>
</ul>
<ul class="footer__list">
<li class="footer__list_item">
<h3 class="footer__list_title">Контакти</h3>
</li>
<li class="footer__list_item">
<a href="catalog.html" class="footer__list_link">Каталог</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Про нас</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Доставка і оплата</a>
</li>
<li class="footer__list_item">
<a href="#" class="footer__list_link">Повернення</a>
</li>
</ul>
</nav>
<div class="footer__reg">
<div class="footer__reg_start">
<h3 class="footer__reg_title">Дізнавайся про новинки першим</h3>
<p class="footer__reg_text">Отримуй від нас смс із сюрпризами</p>
</div>
<form class="footer__reg_form">
<input
type="email"
name=""
id=""
class="footer__reg_input"
placeholder="Email"
required
/>
<button class="footer__reg_btn">Відправити</button>
</form>
</div>
</div>
</footer>
</div>
</body>
</html>Источник: Stack Overflow на русском