section UL est pêle-mêle

Question

J'essaie de comprendre comment faire les <ul> listes alignées dans les boîtes en-ligne. J'ai 4 boîtes avec du contenu, et celles du centre sont parfaites, mais celles du côté gauche et du côté droit sont inégales.

Je suis un débutant au HTML et CSS, donc je suis vraiment confus sur ce qu'il faut faire.

What it looks like on Firefox

C'est ce que j'ai sur 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; 
} 

Ceci est mon format HTML:

<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

Ce code fonctionne très bien dans mon ordinateur portable chrome et safari. Vous devriez essayer un autre navigateur si cela fonctionne bien dans un autre navigateur que Firefox.