CSS - Display:block getting put by default

Question

I'm extremely new in the programming world, learning by myself. I've been able to create 2 basic website mockups, but on the 3rd one, I'm having an issue I haven't encountered before.

I'm simply trying to align a container Div to the center of the page but it refuses to, when using Chrome's inspect tool it shows a display:block preventing to alignment of the items. I have no idea where that block is coming from.

HTML looks like this:

<div id="main-container">
     <div id="upper-text">
         Hello
     </div>

     <div id="lower-text">
         <div class="subcontainer">
             <div class=text>Lom ipsum dolo</div>
         </div>

         <div class="subcontainer">
             <div class=text>Lom ipsum dolo</div>
         </div>
     </div>

</div>

CSS:

#main-container {
   max-width: 980px;
   margin: 0 auto;
   align-items: center;
}

I searched on the internet but couldn't find a related issue. Maybe in too new for that.

The code for the current site I'm working on is way longer and this section is the first one presenting this issue. I opened a clean VS Studio file and wrote only the code I'm posting here, with the same results.

Answer 1

The "display" property defaults to "block". To center a block with "display: block" you can set the "margin" property to "auto" for the side margins.

The "align-items" property is used in conjunction with the "display" property in the "flex" value. "flex" is set for the parent block, and "align-items" will affect children. Learn in more detail how to work with flexbox, for example, here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/