HTML Div boxes alignment

Question

This is what I want it to look like:

I am trying to create an html file that has 5 div boxes like the picture shown above. I have the first three done but I am not sure how to do the bottom two. Any help is appreciated

<div class="row divcenter" style="max-width: 1000px;">

                        <div class="col-sm-4 bottommargin">

                            <div class="team">
                                <div class="team-image">
                                    <img src="images/team/1.jpg" alt="ThreatVulnManage">
                                    <div class="team-overlay">
                                        <div class="team-social-icons">
                                            <a class="si-borderless si-facebook" title="Facebook">
                                                <i style="color:#fff;padding-top: 10px"><ul>Penetration Testing</ul></i>
                                                <i style="color:#fff"><ul>Vulnerability Scans</ul></i>
                                                <i style="color:#fff"><ul>Red/Blue/Purple Team Exercise</ul></i>
                                                <i style="color:#fff"><ul>Black Team</ul></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="team-desc team-desc-bg">
                                    <div class="team-title"><h4>Threat & Vulnerability Management</h4></div>
                                </div>
                            </div>

                        </div>

                        <div class="col-sm-4 bottommargin">

                            <div class="team">
                                <div class="team-image">
                                    <img src="images/team/2.jpg" alt="EnterpriseRiskCompliance">
                                    <div class="team-overlay">
                                        <div class="team-social-icons">
                                            <a class="si-borderless si-facebook" title="Facebook">
                                                <i style="color:#fff"><ul>IT Security Assessment & Cyber Breach Risk Assessment</ul></i>
                                                <i style="color:#fff"><ul>HIPAA & PCI-DSS</ul></i>
                                                <i style="color:#fff"><ul>Third-Party Vendor Risk Assessment</ul></i>
                                                <i style="color:#fff"><ul>Cloud App Risk Assessment</ul></i>
                                                <i style="color:#fff"><ul>Data Discovery Mapping & Classification</ul></i>
                                                <i style="color:#fff"><ul>Compliance Management</ul></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="team-desc team-desc-bg">
                                    <div class="team-title"><h4>Enterprise <br>Risk & Compliance</h4></a></div>
                                </div>
                            </div>

                        </div>

                        <div class="col-sm-4 bottommargin">

                            <div class="team">
                                <div class="team-image">
                                    <img src="images/team/3.jpg" alt="SecurityProgramStrategy">
                                    <div class="team-overlay">

                                        <div class="team-social-icons">
                                            <a class="si-borderless si-facebook" title="Facebook">
                                                <i style="color:#fff;padding-top: 10px"><ul>Infosec Program Development</ul></i>
                                                <i style="color:#fff"><ul>ISO 27002</ul></i>
                                                <i style="color:#fff"><ul>NIST</ul></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="team-desc team-desc-bg">
                                    <div class="team-title"><h4>Security Program <br>Strategy</h4></div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="row divcenter" style="max-width: 1000px;">

                        <div class="col-sm-4 bottommargin">

                            <div class="team">
                                <div class="team-image element-5">
                                    <img src="images/team/1.jpg" alt="Trust">
                                    <div class="team-overlay">
                                        <div class="team-social-icons">
                                            <a class="si-borderless si-facebook" title="Facebook">
                                                <i style="color:#fff;padding-top: 10px"><ul>T-Score</ul></i>
                                                <i style="color:#fff"><ul>R-Score</ul></i>
                                                <i style="color:#fff"><ul>PNProtect</ul></i>
                                                <i style="color:#fff"><ul>Trust Restoration Framework</ul></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="team-desc team-desc-bg">
                                    <div class="team-title"><h4>Trust</h4></div>
                                </div>
                            </div>

                        </div>

                        <div class="col-sm-4 bottommargin">

                            <div class="team">
                                <div class="team-image element-4">
                                    <img src="images/team/2.jpg" alt="EducationAwareness">
                                    <div class="team-overlay">
                                        <div class="team-social-icons">
                                            <a class="si-borderless si-facebook" title="Facebook">
                                                <i style="color:#fff;padding-top: 10px"><ul>Security Awareness Training</ul></i>
                                                <i style="color:#fff"><ul>Secure Code Review Training</ul></i>
                                                <i style="color:#fff"><ul>Human Breach Prevention Project</ul></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="team-desc team-desc-bg">
                                    <div class="team-title"><h4>Education & Awareness</h4></div>
                                </div>
                            </div>

                        </div>

Answer 1

Hard to say exactly, without knowing how you're structuring your code. If everything is within one container, you could set it's text-align to center and have the elements within it have display: inline-block.

<div class="wrapper">
  <div class="child">
  <div class="child">
  <div class="child">
  <div class="child">
  <div class="child">
</div>

And css:

.wrapper {
  text-align: center;
}

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #777777;
  margin: 15px;
}

As long as the children are too wide to all fit on the same row in the wrapper, they'll move on to the next row. Alternatively you can place a <br> element to force them to wrap to a new row or just put them children in separate <div>s

Answer 2

我对编码很陌生，如果这个建议对你不起，我很抱歉。我想回答问题，也许我可以自己学习更多。

我会在css中做这样的事情：

#boxes {
   float: left;
   position: relative;
}

.box4 {
   clear: left;
}

然后相应地编辑保证金。