Hoffe ich habe es einigermaßen verständlich erklärt.
Neee... irgendwie nicht! Weder aus deinem Text.. noch aus dem Bild... und schon gar nicht aus dem Fiddle kann ich erkennen, wo dein Problem liegt und was du eigentlich erreichen willst?
Was verstehst du unter einer 'Dreiergruppe'? ... drei Spalten nebeneinander? Dann benutze 'FlexBox' https://www.w3schools.com/css/css3_flexbox.asp
Das Bild was ich am Anfang angehangen habe ist der aktuelle Stand & ich möchte das es so aussieht wie es in dem neuen Bild dargestellt ist.
In dem Tutorial was ich mache, wird mit Skeleton gearbeitet, denke mal das diese Info wichtig für dich ist.
Mit Skeleton habe ich noch nicht gearbeitet, aber das sieht nicht nach 'Hexenwerk' aus... ein einfaches Grid Layout, basierend auf einer 12 spaltigen Aufteilung.
für deine 2 Gruppen sollte da die Grundstruktur etwa so aussehen...
<div class="container">
<div class="row">
<div class="six columns">...hier dein Inhalt für die linke Seite...</div>
<div class="six columns">...hier dein Inhalt für die rechte Seite...</div>
</div>
</div>
Ist auf der Seite http://getskeleton.com/ auch ganz nett beschrieben.
- - - Aktualisiert - - -
Mir ist da gerade noch etwas aufgefallen...
Mit deiner Verschachtelung der <div>'s stimmt was nicht - es fehlt mindestens ein schließendes </div> (vielleicht auch mehr). Konkret ist es in deinem Code das erste '<div class="six columns">', welches nicht richtig beendet wird.
Überprüfe doch mal in diesem Bereich, ob da wirklich alle Tags richtig beendet werden!
- - - Aktualisiert - - -
... der schließende </header> fehlt auch!
Dein Code ist für mich eher nicht tutorialwürdig... der ist zum Lernen viel zu komplex und verschachtelt! Wundert mich nicht, dass du bei dem 'Div-Gewusel' den Fehler nicht findest.
Hab mal selber versucht und nach dem, was ich so an Struktur erkennen kann, die <div>'s zu ergänzen, dass zumindest kein Fehler mehr angezeigt wird... aber ohne Gewähr.. testen kann ich das nicht wirklich.
<div class="features">
<div class="container">
<div class="row">
<div class="six columns">
<div class="feature-icon">
<i class="fas fa-camera-retro"></i>
</div>
<div class="feature-text">
<h5>Mobile App Development</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
<div>
<div class="feature-icon">
<i class="fas fa-balance-scale"></i>
</div>
</div>
<div class="feature-text">
<h5>Animations</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
<div>
<div class="feature-icon">
<i class="fas fa-address-card"></i>
</div>
</div>
<div>
<div class="feature-text">
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
</div>
<div class="six columns">
2. Spalte
</div>
</div>
</div>
</div>
Das ist nur der untere Teil deines Codes.. siehst du ja selber... dahinter kommt nur noch </body></html>.
Sieht dann lokal bei mir so aus...
Der Weg ist schon ganz richtig, du hast ein Projekt und setzt es um.
Was mir nur auffällt, da sind einige unnötige <div></div> Elemente, die keine Funktion haben...
Beispiel:
... <div>
<div class="feature-icon">
<i class="fas fa-address-card"></i>
</div>
</div>
<div>
<div class="feature-text">
<h5>UI/UX</h5>
<p>
Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500.
</p>
</div>
</div>
Die rot markierten machen nichts... haben keine Funktion und bringen auch soweit ich sehen kann keine eigenen Formatierungen mit.
Sie machen den Code nur unübersichtlich und, wie du selber feststellen konntest, sehr schwierig für eine Fehlersuche... manchmal sind sie sogar der Fehler.
Ich bin aber kein großer Freund von diesen 'fertigen' Lösungen wie dieses Skeleton! Zum Lernen finde ich es besser, sich mit dem CSS selbst zu beschäftigen und nicht Dinge zu nutzen, die man selbst gar nicht wirklich versteht!
Die Bibel für Webentwickler ist ... https://www.w3schools.com/ . Da steht alles, was du jemals über HTML, CSS & Co... wissen wolltest und dich nur noch nicht zu frage getraut hast ;)!
Ist allerdings in English.
In deutsch wäre eine gute Alternative ... https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML-Einstieg
und wenn du die vorschläge von @Sailor richtig machst könnte es so aussehen.
https://basti1012.bplaced.net/index.php?ordn…_Bitte_um_Hilfe
Den rest mußt du dann noch machen ,ich wollte dir nicht die ganze arbeit abnehmen:-)
Aber ich muß mal dazu sagen das es echt sehr viel div Suppe wahr.Das hat sailor ja schon gesagt das da sehr viel unnütziges zeug zwischen ist.
Ich habe in mein Beispiel nur die nötigsten genommen.
basti1012 - hast du gut gut hinbekommen ;)!
MrDownUnder - WP ist eine etwas andere Baustelle. Und ja, auch da kann man natürlich manuell einiges machen... vorausgesetzt, man weiß was man tut. Ohne HTML und CSS Kenntnisse ist man da dann aber auch sehr schnell am Ende. Kompliziert wird die Sache, weil man da auch PHP so einigermaßen im Griff haben sollte.
Ansonsten ist die 'footer.php' eines WP Themes aber eine ganz normale Datei, in der man Dinge nach seinen eigenen Vorstellungen ändern kann.