The unitgrid needs to be aligned vertically and horizontally to be just below maingrid.
maingrid is in the center of the page.
The image is attached below to where the unit grid needs to be placed which is under maingrid, with a little gap.
I have tried many things, but it's not aligning correctly. There's an image of the current page below:
below is the html and css code:
* { margin: 0; font-family: arial; border: border-box; background-color: rgb(225, 241, 253);}.navbar { display: flex; background-color: #f6f8fb; color: #0e0d0d; height: 100px; display: flex; align-items: center; justify-content: space-evenly;}.nav-logo { height: 50px; width: 110px;}.logo { background-image: url("amazon_logo.png"); background-size: cover; background-color: #0e0d0d; height: 50px; width: 100%;}.nav-head { display: flex; justify-content: center; width: 650px; height: 40px; border-radius: 4px; font: 14px;}.panel { height: 40px; display: flex; color: white; background-color: rgb(0, 65, 90); justify-content: space-evenly; align-items: center; background-color: rgb(0, 65, 90);}.panel-all { font-size: 0.9rem; font-weight: 700;}.panel-options a { font-size: 0.9rem; display: inline; margin-left: 10px; text-decoration: none; background-color: rgb(0, 65, 90); color: white;}.sidegrid { width: 160px; height: 499px; background-color: rgb(225, 241, 253); padding-left: 120px; display: grid; grid-template-rows: 49px 49px 49px 49px 49px 49px; grid-template-columns: 49px 49px; row-gap: 38px; column-gap: 32px;}.sidegrid-item { width: 78px; height: 78px; background-color: white; border-radius: 4px;}.unitgrid { height: 100px; width: 600px; margin-left: 440px; background-color: white; left: 50%; top: calc(50% + 200px); display: grid; grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px; grid-template-rows: 40px 40px; align-items: center; justify-content: space-evenly; align-content: space-evenly;}.maingrid { display: flex; height: 324px; width: 600px; background-color: white; position: absolute; left: 50%; transform: translate(-50%, 0); top: 25%;}<nav><div class="navbar"><div class="nav-logo border"><div class="logo"></div></div><div class="nav-head "><h1>Kstps</h1></div><div class="nav-toggle"> Hello</div></div></nav><div class="panel"><div class="panel-options"><a href="#">Home</a><a href="#">e-service</a><a href="#">corporate link</a><a href="#">Plant link</a><a href="#">Important links</a><a href="#">Internet links</a><a href="#">About us</a></div></div><div class="sidegrid"><div class="sidegrid-item">1</div><div class="sidegrid-item">2</div><div class="sidegrid-item">3</div><div class="sidegrid-item">4</div><div class="sidegrid-item">5</div><div class="sidegrid-item">6</div><div class="sidegrid-item">7</div><div class="sidegrid-item">8</div><div class="sidegrid-item">9</div><div class="sidegrid-item">10</div><div class="sidegrid-item">11</div><div class="sidegrid-item">12</div><div class="sidegrid-item">13</div><div class="sidegrid-item">14</div></div><div class="maingrid">.</div><div class="unit"><div class="unitgrid"><div class="unitgrid-item-1">1</div><div class="unitgrid-item">2</div><div class="unitgrid-item">3</div><div class="unitgrid-item">4</div><div class="unitgrid-item">5</div><div class="unitgrid-item">6</div><div class="unitgrid-item">7</div><div class="unitgrid-item">8</div><div class="unitgrid-item">9</div><div class="unitgrid-item">10</div><div class="unitgrid-item">11</div><div class="unitgrid-item">12</div><div class="unitgrid-item">13</div><div class="unitgrid-item">14</div><div class="unitgrid-item">15</div><div class="unitgrid-item">16</div><div class="unitgrid-item">17</div><div class="unitgrid-item">18</div></div></div>
I tried align, and justify-content, I tried adding margin and padding.