UL-Abschnitt ist durcheinander

Question

Ich versuche herauszufinden, wie die <ul> Listen innerhalb der Inline-Boxen ausgerichtet werden. Ich habe 4 Boxen mit Inhalt, und die in der Mitte sind perfekt, aber die auf der linken und rechten Seite sind uneben.

Ich bin ein Anfänger bei HTML und CSS, also bin ich wirklich verwirrt, was zu tun ist.

What it looks like on Firefox

Dies ist, was ich auf CSS haben:

.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; 
} 

Das ist mein HTML-Format:

<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> 

Answer 1

Dieser Code funktioniert in meinem Laptop fein in Chrom und Safari. Sie sollten einen anderen Browser ausprobieren, wenn er in einem anderen Browser funktioniert, als es in Firefox ein Problem gibt.