External CSS Affecting Lesson's Grid Styling

[wondersavant]

https://btholt.github.io/complete-intro-to-web-dev-v3/lessons/css/grid

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
  }

  .grid-picture {
    margin: 0;
    padding: 0;
  }

The row and column gap values are the same but visually, I've noticed a difference. Upon inspecting, I found an external CSS class affecting it

.lesson-content img {
  margin: 5px auto;
  display: block;
}