title: trying to remove css grid right margin
body: <p>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 <code>margin : 0 auto;</code> but didn't work it made it worse actually xD. i  also checked if the container has margin or padding
  <a href="https://i.stack.imgur.com/NDK07.png" rel="nofollow noreferrer">Here is what am i talking about :</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#owl-carousel').owlCarousel({
      loop: true,
      margin: 30,
      dots: true,
      nav: false,
      rtl: true,
      items: 2,
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html dir="rtl"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;owl&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css"&gt;
          &lt;link rel="preconnect" href="https://fonts.gstatic.com"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Zen+Dots&amp;display=swap" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Changa:wght@500&amp;display=swap" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
           &lt;!-- * Header START --&gt;
  
      &lt;div class="text"&gt;
          &lt;div class="logo"&gt;
              &lt;a href="#"&gt;ON ANIME&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
          
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;الرئيسية&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;قائمة الانميات&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;افلام الانمي&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
          &lt;div class="contain"&gt;
              &lt;div id="owl-carousel" class="owl-carousel owl-theme"&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://images3.alphacoders.com/820/thumb-1920-820754.png&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://images3.alphacoders.com/820/thumb-1920-820754.png&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://images3.alphacoders.com/820/thumb-1920-820754.png&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://images3.alphacoders.com/820/thumb-1920-820754.png&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                  &lt;div class="movie-card" style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;&lt;h1&gt;The Incredibles 2&lt;/h1&gt;&lt;span&gt;92 min&lt;/span&gt;&lt;span&gt;5 &lt;i class="fas fa-star"&gt;&lt;/i&gt;&lt;/span&gt;&lt;p&gt;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.&lt;/p&gt;&lt;button class="watch"&gt;WATCH MOVIE&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="contain"&gt;
                &lt;div class="postss"&gt;
                  &lt;div class="hot"&gt;
                      &lt;h3&gt;انميات مميزة&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="anime-list"&gt;
                      &lt;ul class="auto-grid"&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 1&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 2&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 3&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 4&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 5&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 6&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 7&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 8&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 9&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 10&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 11&lt;/li&gt;
                          &lt;li style="background-image: url(&amp;quot;https://wallpaperaccess.com/full/2412138.jpg&amp;quot;);"&gt;Item 12&lt;/li&gt;
                        &lt;/ul&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"&gt;&lt;/script&gt;
          &lt;script src="script.js" async defer&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>