HTML&CSS center items-CodePudding

I have this box that I want to display on a web page through HTML&CSS. But I can't manage to place the white boxes inside the blue one. Any help is appreciated. The CSS I put is just so I can see the borders of the elements. I want it to look like this

<div >
<h1 class = "title">Data Manipulation Language</h1>
    <ul >
        
        <li class = "update">
            <p>UPDATE</p>
            <p> UPDATE MyTable</p>
            <p>SET col1 = 56</p>
            <p>WHERE col2 = 'something';</p>
        </li>
        
        <li  >
            <p>INSERT<p>
            <p>INSERT INTO MyTable(col1, col 2)</p>
            <p>VALUES ('value1', 'value2');</p>
            <p></p>
        </li>
        
        <li >     
            <p>DELETE</p>
            <p>DELETE FROM MyTable</p>
            <p>WHERE col1 = 'something';</p>
            <p></p> 
        </li>
        
        <li >     
            <p>SELECT</p>
            <p>SELECT col1, col2</p>
            <p>FROM MyTable;</p>
            <p></p>
        </li>
    
    </ul>
    
</div>

.update/.delete/.insert/.select(the classes of the white boxes) {
    background-color: #FFFFFF;
    left: auto;
    float: left;
    text-align: left;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 5px;
    padding:10px;
    border: 6px solid #FF0004;
    border-width: 5;
}

CodePudding user response：

You can rewrite your CSS code , use flex or grid for centering items. Or, if you have one block inside another, you ca

CodePudding user response：

I have added paddings, background color, basic stylings in main wrapper and used grid in inner items.

.table {
  background: blue;
  color: white;
  padding: 1em;
  border-radius: 1em;
  max-width: 900px;
  margin: 0 auto;
}

.title {
  text-align: center;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  list-style: none;
}

.content li {
  background: white;
  padding: 0.7em;
  color: #333;
  border-radius: 0.3em;
}

.content li p:first-child {
  font-weight: bold;
  text-align: center;
}

<div >
<h1 class = "title">Data Manipulation Language</h1>
    <ul >
        
        <li class = "update">
            <p>UPDATE</p>
            <p> UPDATE MyTable</p>
            <p>SET col1 = 56</p>
            <p>WHERE col2 = 'something';</p>
        </li>
        
        <li  >
            <p>INSERT<p>
            <p>INSERT INTO MyTable(col1, col 2)</p>
            <p>VALUES ('value1', 'value2');</p>
            <p></p>
        </li>
        
        <li >     
            <p>DELETE</p>
            <p>DELETE FROM MyTable</p>
            <p>WHERE col1 = 'something';</p>
            <p></p> 
        </li>
        
        <li >     
            <p>SELECT</p>
            <p>SELECT col1, col2</p>
            <p>FROM MyTable;</p>
            <p></p>
        </li>
    
    </ul>
    
</div>