Is there a way to put the grid in the center-CodePudding

I'm creating a fake site for Pentel and I want to insert images of pens using a grid layout. However, the grid shifts to the left and a scroll bar appears in the bottom of the page.

Full Screen:

Small Screen:

I want to make it so the scroll bar disappears and the grid is in the center.

HTML:

<div >
        <div >
          <img src="./images/black-energel-rtx-refillable-liquid-gel-pen.png" alt="black EnerGel RTX refillable liquid gel pen">
          <img src="./images/blue-ballpoint-07-clear-barrel.png" alt="blue ballpoint 0.7 clear barell pen">
          <img src="./images/EnerGel-X-retractable-gel-pen.png" alt="EnerGel-X retractable gel pen">
          <img src="./images/tradio-fountaion-blue-ink-white-barrel-pen.png" alt="tradio fountain blue ink white barrel pen">
        </div>
</div>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
}

.pens-images-container {
  margin-top: 2rem;
  height: 100vh;
  width: 100vw;
}

.pens-images {
  margin: auto;
  max-width: 70%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2em;
  
}

.pens-images img {
  width: 400px;
  height: 400px;

}

CodePudding user response：

The image being on the left is caused by the wrapping div being wider, than the image, so you have to center the image inside the div, too:

The horizontal scrollsbars might be caused by the 100vw, if there is padding or margin applied on the wrapping elements.

https://jsfiddle.net/59df1bgq/31/

I have taken the freedom and replaced all images by placeholders with the dimension of 400*400 pixels.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
    height: 100%;
    background-color: #f5f5dc;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
}

.pens-images-container {
  margin-top: 2rem;
}

.pens-images {
  display: grid;
  margin: auto;
  max-width: 70%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2em;
}

.pens-images img {
  margin: auto;
}

<div >
        <div >
          <img src="https://via.placeholder.com/400" alt="black EnerGel RTX refillable liquid gel pen">
          <img src="https://via.placeholder.com/400" alt="blue ballpoint 0.7 clear barell pen">
          <img src="https://via.placeholder.com/400" alt="EnerGel-X retractable gel pen">
          <img src="https://via.placeholder.com/400" alt="tradio fountain blue ink white barrel pen">
        </div>
</div>

CodePudding user response：

According to me, there is a problem in you css code. In your given lines of code:

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
}    
.pens-images-container {
      margin-top: 2rem;
      height: 100vh;
      width: 100vw;
    }

Just remove the line width: 100vw; and check. Instead of this you can write width: 100%; It may resolve your problem.