Bootstrap is overriding my Style.CSS Declarations. Font-Families and other adjustments or declarations respectively are not implemented even though I specified the selectors as much as possible, I ordered the links in the head section, I used !important, I assigned ID´s but nothing is working. What can I do?
In this Snippet you see that the text is not fitting into the divs what is only the case when I implemented Bootstrap:https://jsfiddle.net/samicanimm/x5wqb96a/
html, html body { width: 100%; padding: 0; margin: 0; font-weight: 200; box-sizing: border-box; font-family: "DM Sans", sans-serif !important; font-optical-sizing: auto !important; font-style: normal;} .service-introduction { height: 50vh; color: white; background-color: rgb(0, 184, 225); display: flex; flex-direction: column; padding-left: 30%;} div#service-introduction h2#service-heading { font-size: clamp(3rem, 5vw, 4rem); margin: 0; /* Entfernt den Standard-Außenabstand von h2 */} #first-intro { margin-top: 8vh; font-size: clamp(0.8rem, 1.2vw, 2rem);} div#service-introduction .service-introduction-text { width: 40%; display: block; /* Standardverhalten, passt die Höhe dem Inhalt an */ margin: 0; /* Entfernt den Standard-Außenabstand */ font-size: clamp(1rem, 1.1vw, 1.5rem);} @media (max-width: 768px) { .service-introduction { padding-left: 5%; height: auto; } .service-introduction .service-introduction-text { width: 100%; padding-bottom: 5vh; }} html > body > div#gewerke-container { display: flex; flex-wrap: wrap; gap: 5vh; /* Reduzierter Abstand zwischen den Elementen */ background-color: rgb(243, 243, 243); padding: 2vh; /* Fügt ein wenig Innenabstand hinzu */ margin: 0; padding-top: 8vh; justify-content: center;} html > body > div#gewerke-container > div.gewerke { overflow: hidden; background-color: white; border-radius: 5px; width: 25.6%; /* Beibehalten der Breite */ height: 35vh; /* Angepasste Höhe, abhängig von Ihren Bedürfnissen */ display: flex; flex-direction: column; justify-content: space-between; /* Verteilt den Inhalt gleichmäßig im Container */ margin-bottom: 2vh; /* Fügt Abstand unten hinzu */ padding: 0.9375rem 1.5625rem; /* 15px vertikaler und 25px horizontaler Innenabstand */} html body div#gewerke-container div.gewerke:hover { color: white; background-color: rgb(0, 184, 225); cursor: pointer; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);} .gewerke:hover .about-us { color: white;} .gewerke-container .gewerke:nth-child(-n + 3) { margin-top: 10vh;} div.gewerke-container div.gewerke h4.heading { font-size: clamp(1.5rem, 1vh, 1rem);} .gewerke-container .gewerke:nth-child(3), .gewerke-container .gewerke:nth-child(5) { height: 40vh;} @media (max-width: 768px) { div.gewerke-container div.gewerke { width: 100%; margin-bottom: 0; height: 35vh; justify-content: space-around; } div.gewerke-container { gap: 4vh; } div.gewerke-container .gewerke:nth-child(-n + 3) { margin-top: 0; }}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /><title>Bootstrap Example</title><!-- Bootstrap Bundle JS, inklusive Bootstrap und Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" /><link href="style.css" rel="stylesheet" /></head><body><div id = "gewerke-container" class="gewerke-container section"><div class="gewerke"><h4 class="heading">Gerüstbau & -vermietung</h4><p class="about-us"> In unserem Gerüstbau liegen individuelle Lösungen und ein großer Gerüstbestand vorn. Sicherheit und Effizienz sind unser Fundament. Wir ermöglichen mit unserem Gerüstbestand Zugang zu schwierigen Baustellen und bieten flexible Vermietung.</p></div><div class="gewerke"><h4 class="heading">Rohbau</h4><p class="about-us"> Unsere Rohbauarbeiten bilden das Herzstück unserer Projekte. Wir setzen auf bewährte Methoden und innovative Ansätze, um langlebige Strukturen zu errichten. Dabei achten wir besonders auf die Qualität der Materialien und die Präzision in der Ausführung.</p></div><div class="gewerke"><h4 class="heading">Erdarbeiten</h4><p class="about-us"> Erdarbeiten sind fundamental für den Erfolg eines Bauprojekts. Unser Team verfügt über das Know-how, um Bodenbeschaffenheiten zu analysieren und effektive Lösungen für Fundamente und Gründungen zu implementieren, die den höchsten Standards entsprechen.</p></div><div class="gewerke"><h4 class="heading">Fassadenarbeiten</h4><p class="about-us"> Für Fassadenarbeiten führen wir präzise Putz- und Stuckarbeiten durch, die Ihrer Fassade Struktur und Charakter verleihen. Wir spezialisieren uns auch auf WDVS-Arbeiten, um die Energieeffizienz Ihres Gebäudes zu optimieren. Abschließend sorgt unser sorgfältiger Fassadenanstrich für dauerhaften Schutz und ästhetischer Optik Ihres Gebäudes.</p></div><div class="gewerke" id = "innenausbau"><h4 class="heading">Innenausbau</h4><p class="about-us"> Unser Innenausbau-Service umfasst präzisen Innenputz, feine Spachtelarbeiten und effizienten Trockenbau, um Ihre Räume optimal vorzubereiten. Darauf folgen Maler- & Lackierarbeiten, die Farbe und Schutz bieten, sowie Estricharbeiten für einen soliden Untergrund. Abschließend veredeln wir mit hochwertigen Fliesen- und Fußbodenparkettarbeiten, die Ästhetik und Funktionalität vereinen.</p></div><div class="gewerke"><h4 class="heading">Reinigung</h4><p class="about-us"> Unser Bauunternehmen spezialisiert sich auf effiziente Reinigungsdienste. Wir bieten professionelle Gebäudereinigung, zielgerichtete Bau- & Industriereinigung sowie sorgfältige Büro- und Praxenreinigung, um Sauberkeit und Hygiene zu gewährleisten. Mit modernen Methoden sichern wir Werterhalt und Wohlbefinden.</p></div></div></body></html>