0

Se me está agregando un padding a los lados en el contenedor grid que no me permite centrar el contenido. Estoy usando css grid y bootstrap; no sé si es algo añadido por bootstrap pero no me permite quitarlo. Estoy usando también.

los bordes entre la seccion es el problema

body {
  background-color: #AEA7A7 !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

img {
  max-width: 100%;
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
}

.header .logo a {
  font-family: 'Pacifico',sans-serif;
  font-weight: bold;
  font-size: 2rem;
  color: white;
  text-decoration: none;
}

.header form input {
  background-color: transparent;
  border: 0;
  border-bottom: solid 1px black;
  width: 300px;
  color: white;
  padding: 0.5rem;
}

.header form input::-webkit-input-placeholder {
  color: white;
}

.header form input:-ms-input-placeholder {
  color: white;
}

.header form input::-ms-input-placeholder {
  color: white;
}

.header form input::placeholder {
  color: white;
}

.header form i {
  color: white;
  font-size: 1rem;
}

.header .nav-bar a {
  margin-right: 1rem;
  text-decoration: none;
  font-family: 'Lato',sans-serif;
}

.header .nav-bar i {
  font-size: 1.8rem;
  color: white;
}

.header .btn-i {
  background-color: white;
  padding: 1rem;
  border-radius: 50px;
  color: black;
}

.header .btn-r {
  background-color: #218F84;
  padding: 1rem;
  border-radius: 50px;
  color: white;
}

@media (max-width: 992px) {
  header .burgers {
    display: inline-block;
  }
  .nav-bar {
    display: none;
  }
  .nav-bar.show {
    display: block;
    margin-top: 2rem;
  }
  .nav-bar.show .btn-i {
    padding: .7rem;
    font-size: .9rem;
  }
  .nav-bar.show .btn-r {
    padding: .7rem;
    font-size: .9rem;
  }
  .nav-bar.show i {
    font-size: 1.6rem;
  }
  .header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .burgers {
    background-color: transparent;
    border: 0;
    color: white;
    font-size: 20px;
    cursor: pointer;
  }
  .burgers:focus {
    outline: none;
  }
  .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
  .header form i {
    display: none;
  }
}

@media (min-width: 992px) {
  .burgers {
    display: none;
  }
}

.categorias {
  background-color: white;
  padding-top: 1rem;
}

.categorias .title {
  text-transform: capitalize;
  font-size: 1.3rem;
  margin-top: 0rem;
  font-family: 'Roboto',sans-serif;
  text-align: center;
  font-weight: bold;
  color: #585757;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 2rem;
  padding: 1.5rem 3rem;
}

@media (max-width: 992px) {
  .grid {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
}

.link {
  background-color: #aa1414;
  text-decoration: none;
  color: white;
  padding: .8rem;
  border-radius: 50px;
  text-align: center;
  margin-right: 1rem;
}

.link:hover {
  color: white;
}

.negocios {
  background-color: #238acf;
}

.negocios:hover {
  background-color: #1c6da3;
}

.naturaleza {
  background-color: #23cf5c;
}

.naturaleza:hover {
  background-color: #1ca349;
}

.historia {
  background-color: #cfbe23;
}

.historia:hover {
  background-color: #a3961c;
}

.ciencia {
  background-color: #4823cf;
}

.ciencia:hover {
  background-color: #391ca3;
}

.amor {
  background-color: #cf2923;
}

.amor:hover {
  background-color: #a3201c;
}

.dinero {
  background-color: #239ecf;
}

.dinero:hover {
  background-color: #1c7da3;
}

.pasion {
  background-color: #cf2348;
}

.pasion:hover {
  background-color: #a31c39;
}

.documentales {
  background-color: #45b369;
}

.documentales:hover {
  background-color: #378e53;
}

.informatica {
  background-color: #236ecf;
}

.informatica:hover {
  background-color: #1c57a3;
}

.salud {
  background-color: #cfb523;
}

.salud:hover {
  background-color: #a38f1c;
}

.card {
  border: none;
  text-align: center;
  width: 150px;
  height: 300px;
  border: none !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.card img {
  height: 230px;
}

.card .book {
  color: #585757;
  font-family: 'Lato',sans-serif;
  font-weight: bold;
}

.card .autor {
  font-size: 14px;
  color: #C4C4C4;
  font-family: 'Lato',sans-serif;
  font-weight: 700;
  margin-bottom: .5rem;
}

.card .stars {
  color: #FFDD01;
}
4
  • No veo ningún margen en tu captura, eso es un padding, y está claramente designado en tu css "padding: 1.5rem 3rem;" aparte que no has puesto el código mínimo verificable
    – Elboy
    Commented el 10 mar. 2021 a las 17:53
  • Hola, he quitado el padding y me sigue saliendo asi Commented el 10 mar. 2021 a las 17:56
  • No muestras el parte del html, y no explicas como has quitado el padding, yo lo veo en tu css, asi es complicado ayudarte
    – Elboy
    Commented el 10 mar. 2021 a las 18:00
  • Buenas, agrega el html para crear el ejemplo mínimo verificable y resolver tu problema
    – Excorpion
    Commented el 10 mar. 2021 a las 18:18

1 respuesta 1

0

si lo que quieres es quitar el padding de los lados del grid, solo tienes que cambiarlo a como lo dejo a continuación:

Para saber mas de como funciona el padding te dejo esta pagina donde lo explican con un ejemplo muy comprensible https://developer.mozilla.org/es/docs/Web/CSS/padding

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 2rem;
  padding: 1.5rem 0;
}

1
  • Procura hacer un breve resumen de lo que hace el código, y lo mismo cuando adjuntas enlaces: recuerda que el contenido del mismo puede que ya no esté disponible más adelante, invalidando así la respuesta. Lee Cómo responder y de paso haz el recorrido de bienvenida para conocer el funcionamiento de Stack Overflow en español.
    – padaleiana
    Commented el 12 mar. 2021 a las 23:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.