HTML/CSS How do I align container to the center of page? CSS:

Question

Trying to align my container to the center of page and the items inside to the center of the container. The alignment moves further to left when its zoomed out too. Looks uneven atm. Here's my HTML and CSS:

https://jsfiddle.net/zr54b812/

CSS: 

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: white;
  border: 5px outset brown;
  padding: 10px;
  justify-content: space-between;
  width: 1000px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 17px;

}


HTML:

<!-- Cake Flavor-->
    <div class="grid-container">

    <div class ="grid-item">
    <h3>Cake Flavor</h3>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">White</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Chocolate</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Yellow</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Marble</label><br>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Confetti (NEW)</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Red Velvet (NEW)</label>
    </div>
    <!--Filling option-->
    <div class="grid-item">
        <h3>Filling Option</h3>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Lemon</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Raspberry</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Strawberry</label>
        <input type="checkbox" name="style1" value="style1">
        <label class="font1" for="style1">Bavarian Cream</label><br>
    
    </div>

    </div>

add `margin: 0 auto;` to the container's style – Itay Aug 06 '20 at 06:52 — Itay, Aug 06 '20 at 06:52
Oh man that worked thanks a bunch! – ThePete Aug 06 '20 at 06:56 — ThePete, Aug 06 '20 at 06:56

score 3 · Accepted Answer · answered Aug 06 '20 at 07:19

To align at center, use can use margin: 0 auto;. Besides that, you are creating one extra column in container, so set grid-template-columns to auto auto and not auto auto auto.

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  margin: 0 auto;
  background-color: white;
  border: 5px outset brown;
  padding: 10px;
  justify-content: space-evenly;
  width: 1000px;
}

score 2 · Answer 2 · answered Aug 06 '20 at 07:24

2

add margin-left:auto; margin-right:auto; to class grid-container

answered Aug 06 '20 at 07:24

Huzee

114
7

HTML/CSS How do I align container to the center of page? CSS:

2 Answers2