trying to remove css grid right margin [duplicate] - css

Question

This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I have made a div and assigned display grid to it everything is fine but the problem is there is a margin I don't know if its a code that i wrote wrong or sthg else .. i tried to use margin : 0 auto; but didn't work it made it worse actually xD. i also checked if the container has margin or padding
Here is what am i talking about :
$('#owl-carousel').owlCarousel({
loop: true,
margin: 30,
dots: true,
nav: false,
rtl: true,
items: 2,
})
.text {
text-align: center;
height: 100px;
background: #0b0a0d;
color: #FFF;
}
.text .logo a{
margin: 0;
line-height: 100px;
font-size: 48px;
font-family: 'Zen Dots', cursive;}
.nav {
background: #0c70de;
color: #FFF;
display: flex;
z-index: 9999;
}
.text .logo a{
color: #FFF;
text-decoration: none
}
.nav ul {
margin: 0 auto;
padding: 0;
display: flex;
/* width: 50%; */
/* margin-left: auto; */
}
ul li{
padding: 20px;
list-style: none
}
ul li a{
color: #FFF;
display: block;
text-decoration: none;
text-transform: uppercase;
font-family: 'Changa', sans-serif;
}
.sticky{
position: fixed;
top: 0;
left: 0;
width: 100%
}
.contain {
margin: 0 auto;
max-width: 1200px;
width: 100%;
margin-top: 50px;
}
.item {
align-items: center;
display: flex;
height: 300px;
justify-content: center;
}
/* slider */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
body {
font-family: 'Raleway', sans-serif;
font-weight: thin;
background: black;
margin: 0;
padding: 0;
}
body:after{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
margin: 0;
z-index: -1;
width: 200%;
height: 200%;
background-color: #16151d;
}
.movie-card {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 800px;
height: 300px;
background-position: center;
background-size: cover;
margin: 4vh auto;
border-radius: 4px;
box-shadow: 2px 3px 12px rgba(0, 0, 0, .4);
color: white;
padding: 2vh 3%;
}
.movie-card:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background: linear-gradient(to left, rgba(40,40,60,1) 0%,rgba(40,0,60,0) 90%);
background-blend-mode: multiply;
will-change: transform;
z-index: 0;
}
i {
font-size: .7em;
color: #ff5b84;
}
h1 {
font-size: 170%;
position: relative;
z-index: 10;
}
span {
display: inline-block;
position: relative;
z-index: 10;
margin-right: 80px;
color: rgb(210, 210, 210);
}
.watch {
display: block;
border: 1px solid white;
border-radius: 4px;
position: relative;
z-index: 10;
color: white;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, .3);
margin: 20px 0px;
outline: none;
box-shadow: 0 0 10px rgba(0,0,0,.5);
transition: all .2s;
}
button:hover {
background: rgba(255, 255, 255, .8);
color: black;
box-shadow: 0 0 10px rgba(255,255,255,.5);
mix-blend-mode: screen;
}
button:active {
transform: translateY(2px);
}
p {
position: relative;
z-index: 10;
font-size: .8em;
width: 60%;
height: 35%;
}
#media (max-width: 768px) {
body {
/* background: none; */
}
.movie-card {
width: 75%;
height: 200px;
}
h1 {
font-size: 120%;
}
p {
display: none;
/* overflow: hidden;
width: 100%;
height: 30%; */
}
.watch {
margin: 5% auto;
}
}
#media (max-width: 500px) {
.movie-card {
width: 100%;
}
}
.hot {
background-color: #694ba1;
padding: 8px 15px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.hot h3 {
color: #FFF;
}
h3 {
font-size: 1.1em;
line-height: 20px;
font-weight: 500;
margin: 0;
position: relative;
}
.anime-list {
background-color: #222;
}
/*
AUTO GRID
Set the minimum item size with `--auto-grid-min-size` and you'll
get a fully responsive grid with no media queries.
*/
.auto-grid {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
/* Presentational styles */
.anime-list ul li {
padding: 5rem 1rem;
text-align: center;
font-size: 1.2rem;
background-size: cover;
background-position: center;
}
.anime-list {
align-items: center;
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>owl</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Changa:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
</head>
<body>
<!-- * Header START -->
<div class="text">
<div class="logo">
ON ANIME
</div>
</div>
<div class="nav">
<ul>
<li>الرئيسية</li>
<li>قائمة الانميات</li>
<li>افلام الانمي</li>
</ul>
</div>
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<div class="movie-card" style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
</div>
</div>
<div class="contain">
<div class="postss">
<div class="hot">
<h3>انميات مميزة</h3>
</div>
<div class="anime-list">
<ul class="auto-grid">
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 1</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 2</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 3</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 4</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 5</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 6</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 7</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 8</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 9</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 10</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 11</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 12</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script src="script.js" async defer></script>
</body>
</html>

Answer 1

You need to over wright the default of the grid ul
So I added ul {padding-inline-start: 0px;} and it seems to be fixed
$('#owl-carousel').owlCarousel({
loop: true,
margin: 30,
dots: true,
nav: false,
rtl: true,
items: 2,
})
ul {padding-inline-start: 0px;}
.text {
text-align: center;
height: 100px;
background: #0b0a0d;
color: #FFF;
}
.text .logo a{
margin: 0;
line-height: 100px;
font-size: 48px;
font-family: 'Zen Dots', cursive;}
.nav {
background: #0c70de;
color: #FFF;
display: flex;
z-index: 9999;
}
.text .logo a{
color: #FFF;
text-decoration: none
}
.nav ul {
margin: 0 auto;
padding: 0;
display: flex;
/* width: 50%; */
/* margin-left: auto; */
}
ul li{
padding: 20px;
list-style: none
}
ul li a{
color: #FFF;
display: block;
text-decoration: none;
text-transform: uppercase;
font-family: 'Changa', sans-serif;
}
.sticky{
position: fixed;
top: 0;
left: 0;
width: 100%
}
.contain {
margin: 0 auto;
max-width: 1200px;
width: 100%;
margin-top: 50px;
}
.item {
align-items: center;
display: flex;
height: 300px;
justify-content: center;
}
/* slider */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
body {
font-family: 'Raleway', sans-serif;
font-weight: thin;
background: black;
margin: 0;
padding: 0;
}
body:after{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
margin: 0;
z-index: -1;
width: 200%;
height: 200%;
background-color: #16151d;
}
.movie-card {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 800px;
height: 300px;
background-position: center;
background-size: cover;
margin: 4vh auto;
border-radius: 4px;
box-shadow: 2px 3px 12px rgba(0, 0, 0, .4);
color: white;
padding: 2vh 3%;
}
.movie-card:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background: linear-gradient(to left, rgba(40,40,60,1) 0%,rgba(40,0,60,0) 90%);
background-blend-mode: multiply;
will-change: transform;
z-index: 0;
}
i {
font-size: .7em;
color: #ff5b84;
}
h1 {
font-size: 170%;
position: relative;
z-index: 10;
}
span {
display: inline-block;
position: relative;
z-index: 10;
margin-right: 80px;
color: rgb(210, 210, 210);
}
.watch {
display: block;
border: 1px solid white;
border-radius: 4px;
position: relative;
z-index: 10;
color: white;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, .3);
margin: 20px 0px;
outline: none;
box-shadow: 0 0 10px rgba(0,0,0,.5);
transition: all .2s;
}
button:hover {
background: rgba(255, 255, 255, .8);
color: black;
box-shadow: 0 0 10px rgba(255,255,255,.5);
mix-blend-mode: screen;
}
button:active {
transform: translateY(2px);
}
p {
position: relative;
z-index: 10;
font-size: .8em;
width: 60%;
height: 35%;
}
#media (max-width: 768px) {
body {
/* background: none; */
}
.movie-card {
width: 75%;
height: 200px;
}
h1 {
font-size: 120%;
}
p {
display: none;
/* overflow: hidden;
width: 100%;
height: 30%; */
}
.watch {
margin: 5% auto;
}
}
#media (max-width: 500px) {
.movie-card {
width: 100%;
}
}
.hot {
background-color: #694ba1;
padding: 8px 15px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.hot h3 {
color: #FFF;
}
h3 {
font-size: 1.1em;
line-height: 20px;
font-weight: 500;
margin: 0;
position: relative;
}
.anime-list {
background-color: #222;
}
/*
AUTO GRID
Set the minimum item size with `--auto-grid-min-size` and you'll
get a fully responsive grid with no media queries.
*/
.auto-grid {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
/* Presentational styles */
.anime-list ul li {
padding: 5rem 1rem;
text-align: center;
font-size: 1.2rem;
background-size: cover;
background-position: center;
}
.anime-list {
align-items: center;
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>owl</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Changa:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
</head>
<body>
<!-- * Header START -->
<div class="text">
<div class="logo">
ON ANIME
</div>
</div>
<div class="nav">
<ul>
<li>الرئيسية</li>
<li>قائمة الانميات</li>
<li>افلام الانمي</li>
</ul>
</div>
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<div class="movie-card" style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
</div>
</div>
<div class="contain">
<div class="postss">
<div class="hot">
<h3>انميات مميزة</h3>
</div>
<div class="anime-list">
<ul class="auto-grid">
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 1</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 2</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 3</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 4</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 5</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 6</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 7</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 8</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 9</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 10</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 11</li>
<li style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");">Item 12</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script src="script.js" async defer></script>
</body>
</html>