Working on a page-Got a question

Hey guys! So I’m working on a webpage:

https://codepen.io/goprime/pen/rJQdBW

I want the boxes(the content inside the second div) to be centered on the page, but I’m confused on how to do it, any help would be appreciated, thanks!

Centered in a line or centered vertically?

Vertically, on the page

.inner{
height:100%;
background-color: palevioletred;
text-align: center;
padding: 2em;
}

.sound{
width: 100px;
height: 100px;
border: black solid 2px;
color: antiquewhite;
background-color: rgba(0, 0, 0, 0.288);
margin: 0 auto;
}

If you want to add a margin so the boxes are not directly on top of each other, change 0 to something else i.e. 5px

Note that I took out the flex display and justify from .inner (if you don’t remove this, the margin on .sound won’t do the job)

2 Likes

Thanks! is there a way to center the whole line of boxes on the center too?