Ich bin HTML-Neuling und habe versucht, eine Website für meine Freunde zu erstellen, auf der ich Karten zur Anzeige von Informationen erstelle. Da ich mehrere Karten in unterschiedlichen Abschnitten erstellt habe, möchte ich alle Karten in ihren jeweiligen Abschnitten ausrichten, hatte aber Probleme.

Zuerst habe ich Inline-Block ausprobiert, weil ich vermutete, dass alle Elemente zusammen einen Block ergeben sollten, aber nichts ist passiert. Als nächstes habe ich versucht, eine Tabelle zu erstellen und die Karten in der Tabelle aufzulisten, aber auch das hat nicht funktioniert. Teilweise gelang es, andere Karten wurden jedoch verkleinert und der Text lief über. Wie kann ich es reparieren?

* { font-family: Arial, Helvetica, sans-serif; } body { background-color: #fafafa; color: rgb(32, 32, 32); margin: 0; } header { position: sticky; top: 0px; } nav { background-color: #fafafa; margin: 0; width: 100%; } ul { text-align: center; } li { display: inline-flex; text-align: center; } a { float: right; list-style-type: none; text-decoration: none; color: rgb(0, 0, 0); background-color: #fafafa; padding: 40px; } a:hover { float: right; list-style-type: none; text-decoration: none; transition-duration: 0.8s; font-size: 25px; } .Fcard1 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 16%; margin-left: 32px; } .Fcard1:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .FCcontainer1 { padding: 2px 16px; } .Fcard2 { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 16%; margin-left: 32px; } .Fcard2:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .FCcontainer2 { padding: 2px 16px; }

     
  
  
 
 
 
Featured Products:
 
 
 
 
  
 
Placeholder
 
Rrreee.00 USD
 
 
 
 
 
  
 
Placeholder
 
Rrreee.00 USD