我想制作一个弹性框布局，如下所示：
我得到前3个看起来没问题，然后下一个没有展示好，没有显示文字，并且有一个奇怪的黑色背景，我无法弄清楚如何摆脱CSS。
如果我要继续向第一个弹性盒结构添加服务和内容，它会自动换行吗？当我使用flex-wrap命令时，它显示了框并将其展开，并且事情变得不合适。
这里是小提琴https://jsfiddle.net/b03q4zzc/
.container {
display: flex;
width: 100%;
height: 500px;
background-color: #fff
/* Make the parent a flex containter */
}
.container-two {
display: flex;
width: 100%;
background-color: #fff;
overflow: hidden;
}
.services {
flex: 1;
padding: 1em;
}
.service {
flex: 1;
/* Distribute free space among flex items */
padding: 1em;
}
h1 {
text-align: center;
display: block;
margin-top: 100px;
}
.service ul {
background-color: #fff;
overflow: hidden;
}
.service li{
list-style-type: circle;
text-align: left;
font-color: white;
max-height: 100px;
min-height: 50px;
max-width: 300px;
min-width: 200px;
}
.service--one h4, a {
text-align: left;
text-decoration: none;
color: red;
}
.service--one a:hover {
color: blue;
text-shadow: 0px 0px 3px white, 0px 0px 5 white;
}
.services--one {
background: #fff
}
.services--two {
background: #fff
}
.service h3 {
text-align: center;
}
.services p {
width: 200px;
display: block;
background: #fff
}
.service h6 {
width: 200px;
}
h5 {
margin-left: 25px;
display: inline-block;
text-align: center;
color: red;
}
.service {
margin-top: 50px;
margin-left: 0px;
display: inline-block;
flex: 1; /* Distribute free space among flex items */
padding: 1em;
}
.service h3 {
flex: 1;
text-align: center;
}
.service h5 {
text-align: center;
color: red;
}
.service--one h5 {
font-style: italic;
}<ul class="container">
<li class="service service--one">
<h3>Business Services</h3>
<ul>
<li>Logo Design</li>
<li>Business Card Design</li>
<li>Letterhead Design</li>
<li>Namebadge Design</li>
<li>Signage and Window Decals</li>
<li>Pamphlets, Brochures, Menus and other business forms</li>
<li>Promotional Product Design</li>
</ul>
</ul>
</li>
<li class="service service--two">
<h3>Sports Services</h3>
<ul>
<li>Team Logo Design</li>
<li>Sellable Merchandise and Apparel Design</li>
<li>Promotional Product Design</li>
<li>Program Design</li>
</ul>
</li>
<li class="service service--three">
<h3>Personal Services</h3>
<ul>
<li>Wall Art</li>
<li>Slideshow Design</li>
<li>Custom Creations</li>
</ul>
</li>
</ul>
<ul class="container-two">
<h2>Popular Packages Include</h2>
<li class="services services--one">
<ul>
<li>"Start Me Up" <strong>$200.00</strong></li>
<p>This package includes <strong>Logo Design, Business Card Design,
Letterhead Design and Invoice Design</strong>.
This package is perfect for the start up, or someone reinventing their
company.</p>
<li class="services services--two"
<li>"Make Me A Brand" <strong>Buy 3 promotional product designs, get 2
free*</strong></li>
<p>This package is for the company that wants marketable merchandise.
These promotional products are great to hand out
at fairs and other events to get your name out there.
<h6>*Any promotional product utilized for sales and profit <i>
<strong>MAY</strong></i> fall under our
guidelines for "Royalties", and may be subject to royalties to Dave's
Logo Designs. For more information if your project would
fall under these guidelines, please <a href="contact.html">Contact
Us</a>.</h6></p>
<li>"Go Team Go" <strong>$250.00</strong></li>
</ul>
</li>
</ul>
<div class="footer">
<footer><h6>Some restrictions apply, contact us for more details.</h6>
<ul>
<h2>Find us on:</h2>
<li><a href="http://www.twitter.com/daveslogodesign" target="_blank"><img
src="https://s19.postimg.org/3tbo98443/twitter.png" height="25px"
width="25px" alt="twitter"></img>Twitter</a></li>
<li><a href="http://www.facebook.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/amc15huxf/facebook.png" height="25px"
width="25px" alt="facebook"></img>Facebook</a></li>
<li><a href="http://www.linkedin.com/daveslogodesigns" target="_blank">
<img src="https://s19.postimg.org/t4kz3h237/linkedin.png" alt="linkedin"
height="25px" width="25px"></img>Linkedin</a></li>
<li><a href="http://www.skype.com/daveslogodesignd" alt="skype"
target="_blank"><img src="https://s19.postimg.org/y9hl7cpn7/skype.png"
height="25px" width="25px"></img>Skype</a></li>
<li><a href="https://www.instagram.com/daveslogos/"><img
src="https://s19.postimg.org/it8matadv/instagram.png" alt="instagram"
height="25px" width="25px"></img>Instagram</a></li>
<li><a href="mailto:daveslogodesigns@gmail.com"><img></a>
</li>
</ul>也许我正在做的事情是错的。谢谢您的帮助。