Справа на странице сайте появилась вертикальная полоса
"Исследуя элемент", заметила в во 2-ом стоит margin-right, кот-й не получается убрать. вылезает за сетку. Как это исправить?
@import url('https://fonts.googleapis.com/css?family=Michroma&display=swap');
body {
font-family: Michroma, serif;
background: linear-gradient(90deg, #0b00a8 0%, #141414 100%);
}
.nav-link {
color: aquamarine;
}
.navbar-nav .nav-link.active {
color: blueviolet;
}
.navbar-brand>img {
height: 2em;
}
.navbar-toggler {
background: blueviolet;
}
.sidebar {
color: aquamarine;
background: linear-gradient(270deg, #0b00a8 0%, #141414 100%);
}
.card {
background: linear-gradient(270deg, #0b00a8 0%, #141414 100%);
color: aquamarine;
}
.card a {
text-decoration: none;
color: aquamarine;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="source/style/mycss.css">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="source/file/main-icon.png" alt="Иконка"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="pricing.html">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section>
<div class="conteiner-fluid mt-4">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-8 col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<a href="#"><img src="source/image/laptop.png" class="card-img-top" alt="Laptop"></a>
<div class="card-body">
<h5 class="card-title"><a href="#">Laptops</a></h5>
<p class="card-text"><a href="#">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</a></p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/vr.png" class="card-img-top" alt="Vr">
<div class="card-body">
<h5 class="card-title">VR</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/gaming pc.png" class="card-img-top" alt="gaming">
<div class="card-body">
<h5 class="card-title">gaming pc</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/controller.png" class="card-img-top" alt="controller">
<div class="card-body">
<h5 class="card-title">controller</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/acc.png" class="card-img-top" alt="acc">
<div class="card-body">
<h5 class="card-title">acc</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/cpu.png" class="card-img-top" alt="cpu">
<div class="card-body">
<h5 class="card-title">cpu</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/gpu.png" class="card-img-top" alt="gru">
<div class="card-body">
<h5 class="card-title">gru</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/other.png" class="card-img-top" alt="other">
<div class="card-body">
<h5 class="card-title">other</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="row">
<div class="col-lg-12 sidebar my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p> Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p>Numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>Ответы (1 шт):
Автор решения: Илья Яловой
→ Ссылка
@import url('https://fonts.googleapis.com/css?family=Michroma&display=swap');
body {
font-family: Michroma, serif;
background: linear-gradient(90deg, #0b00a8 0%, #141414 100%);
max-width: 100vw;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.nav-link {
color: aquamarine;
}
.navbar-nav .nav-link.active {
color: blueviolet;
}
.navbar-brand>img {
height: 2em;
}
.navbar-toggler {
background: blueviolet;
}
.sidebar {
color: aquamarine;
background: linear-gradient(270deg, #0b00a8 0%, #141414 100%);
}
.card {
background: linear-gradient(270deg, #0b00a8 0%, #141414 100%);
color: aquamarine;
}
.card a {
text-decoration: none;
color: aquamarine;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="source/style/mycss.css">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="source/file/main-icon.png" alt="Иконка"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="pricing.html">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section>
<div class="conteiner-fluid mt-4">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-8 col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<a href="#"><img src="source/image/laptop.png" class="card-img-top" alt="Laptop"></a>
<div class="card-body">
<h5 class="card-title"><a href="#">Laptops</a></h5>
<p class="card-text"><a href="#">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</a></p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/vr.png" class="card-img-top" alt="Vr">
<div class="card-body">
<h5 class="card-title">VR</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/gaming pc.png" class="card-img-top" alt="gaming">
<div class="card-body">
<h5 class="card-title">gaming pc</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/controller.png" class="card-img-top" alt="controller">
<div class="card-body">
<h5 class="card-title">controller</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/acc.png" class="card-img-top" alt="acc">
<div class="card-body">
<h5 class="card-title">acc</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/cpu.png" class="card-img-top" alt="cpu">
<div class="card-body">
<h5 class="card-title">cpu</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/gpu.png" class="card-img-top" alt="gru">
<div class="card-body">
<h5 class="card-title">gru</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-4">
<div class="card">
<img src="source/image/other.png" class="card-img-top" alt="other">
<div class="card-body">
<h5 class="card-title">other</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="row">
<div class="col-lg-12 sidebar my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p> Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
<div class="col-lg-12 sidebar my-4">
<p>Numquam alias architecto veritatis deleniti ipsam magni laborum distinctio nisi velit! <a href="#">Learn more >>></a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>