Jquery UL部分混乱不堪

我试图找出如何使

列表在内联框中对齐。我有4个盒子，里面有内容，中间的盒子很完美，但是左边和右边的盒子都不均匀

我是HTML和CSS的初学者，所以我真的不知道该怎么做

这就是我对CSS的看法：

.floating-box {
   float: left;
   width: 205px;
   height: 120px;
   margin: 20px;
   border: 1px solid #3B88AD; 
   padding-left:20px;
   padding-bottom: 165px;
   padding-right: 20px;
   background-color: #f2f2f2;
   font-family: open sans;
   font-size: 15px;
   color: black;
}

h1{
   padding-left: 20px;
   padding-top: 20px;
   font-family: open sans;
   text-shadow: 3px 1px #cccccc;
}

p {
   padding-left: 20px;
   font-family: open sans;
}

#skills{
   color: black;
}

<div class="floating-box"><h4>Brand Identity</h4>
<p>Visual identity such as:
    <ul>
        <li id="skills">Letterheads</li>
        <li id="skills">Business cards</li>
        <li id="skills">Brand guides, and </li>
        <li id="skills">logos</li>
        <li id="skills">Research &amp identity</li>
     </ul>
</p></div>
<div class="floating-box"><h4>Package Design</h4>
    <p>
    <ul>
        <li id="skills"> Creating visually appealing and striking design.</li>
        <li id="skills"> Follwing the clients brief on their brand essence, 
        target audience, user personas, and color scheme.</li>
    </ul>
    </p></div>

 <div class="floating-box"><h4>Web Design</h4>
    <p>
    <ul>
        <li id="skills"><b>User Interface (UI) Design &amp User Experience 
        (UX):</b> 
        Analyzing how people navigate through a site, or app.</li>
        <li id="skills"><b>Interactive Design:</b> Creating mobile apps, 
        banner ads, &amp social media assets.</li>
    </ul>
    </p></div>

<div class="floating-box"><h4>Communcation Design</h4>
    <p>Designing marketing material such as:
    <ul>
        <li id="skills">Flyers</li> 
        <li id="skills">Brochures</li>
        <li id="skills">Postcards</li>
        <li id="skills">and Posters</li>
    </ul></p>
</div>

这是我的HTML格式：

.floating-box {
   float: left;
   width: 205px;
   height: 120px;
   margin: 20px;
   border: 1px solid #3B88AD; 
   padding-left:20px;
   padding-bottom: 165px;
   padding-right: 20px;
   background-color: #f2f2f2;
   font-family: open sans;
   font-size: 15px;
   color: black;
}

h1{
   padding-left: 20px;
   padding-top: 20px;
   font-family: open sans;
   text-shadow: 3px 1px #cccccc;
}

p {
   padding-left: 20px;
   font-family: open sans;
}

#skills{
   color: black;
}

<div class="floating-box"><h4>Brand Identity</h4>
<p>Visual identity such as:
    <ul>
        <li id="skills">Letterheads</li>
        <li id="skills">Business cards</li>
        <li id="skills">Brand guides, and </li>
        <li id="skills">logos</li>
        <li id="skills">Research &amp identity</li>
     </ul>
</p></div>
<div class="floating-box"><h4>Package Design</h4>
    <p>
    <ul>
        <li id="skills"> Creating visually appealing and striking design.</li>
        <li id="skills"> Follwing the clients brief on their brand essence, 
        target audience, user personas, and color scheme.</li>
    </ul>
    </p></div>

 <div class="floating-box"><h4>Web Design</h4>
    <p>
    <ul>
        <li id="skills"><b>User Interface (UI) Design &amp User Experience 
        (UX):</b> 
        Analyzing how people navigate through a site, or app.</li>
        <li id="skills"><b>Interactive Design:</b> Creating mobile apps, 
        banner ads, &amp social media assets.</li>
    </ul>
    </p></div>

<div class="floating-box"><h4>Communcation Design</h4>
    <p>Designing marketing material such as:
    <ul>
        <li id="skills">Flyers</li> 
        <li id="skills">Brochures</li>
        <li id="skills">Postcards</li>
        <li id="skills">and Posters</li>
    </ul></p>
</div>

品牌标识
视觉识别，例如：

信头
名片
品牌指南，以及
徽标
研究与识别


包装设计


创造视觉上有吸引力和引人注目的设计
跟随客户简要介绍其品牌本质，
目标受众、用户角色和配色方案


网页设计


用户界面（UI）设计和用户体验
（用户体验）：
分析人们如何浏览网站或应用程序
交互式设计：创建移动应用程序，
横幅广告和社交媒体资产


通信设计
设计营销材料，例如：

传单
手册
明信片
和海报

这段代码在我的chrome和safari笔记本电脑中运行良好。如果在其他浏览器中工作正常，您应该尝试其他浏览器，而不是Firefox中出现问题。

请在此处发布格式正确的代码。不是作为图像。请尝试将当前代码放入。运行它。如果有效，请保存并与我们共享url。我想你不需要学习

https://www.w3schools.com/css/css_float.asp

@DavodAslanifakor谢谢！我在“#skills”部分添加了“clear:tware”和“float:left”，现在它们已经对齐了。