My content is being cut in half when toggling to mobile version

I am very confused with checking responsiveness of a website I am coding through toggling the mobile version in inspect mode. So i have a basic website with nav and hero section etc. When I go to inspect and toggle the mobile version on a small size e.g. 320px it looks like my image is being cut in half even through I have set my max width in 100% in my css. I havent created any media queries yet because when i tried this white space percisted like cutting my content in half. So I assume it should first appearing taking up the whole space available even if that would possibly cause a scroll behavior towards the right and then I should define the further sizes.

Current page mobile preview

My question is: what am I doing initially wrong and it gets half while the navigation appears correclty?

Help would be so much appreciated.

Here is my current code

body {
    font-family: 'NeueMachina', sans-serif;
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}
/* Navbar */
.navbar {
  position: sticky; /* sticks to top on scroll */
  top: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navdiv {
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  width: 210px;
  height: 45px;
  display: block; 
}
ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
li a {
  color: #4d4d4d;
  font-size: 16px;
  font-weight: bold;
  transition: color 0.3s ease;
}
li a:hover {
  color: #01A4AB;
}
/* Hero Section */
.hero {
  position: relative;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: white;
  padding: 20px;
  box-sizing: border-box;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:auto;
  object-fit: cover;
  z-index: -1;
}
.hero-content {
  text-align: left;
  padding-top: 400px;
  padding-bottom: 50px;
  box-sizing: border-box;
  z-index: 1;
}
.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SiUSpace</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
        /* Enable smooth scrolling */
        html {
            scroll-behavior: smooth;
        }
        @font-face {
            font-family: 'NeueMachina';
            src: url('fonts/PPNeueMachina-InktrapRegular.otf');
        }
        @font-face {
            font-family: 'Lato';
            src: url('fonts/Lato-Regular.ttf');
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
      <div class="navdiv">
        <div class="logo">
          <a href="#"><img src="img/logo.svg" alt="SiuSpace Logo" /></a>
        </div>
        <div class="nav-links">
          <ul>
            <li><a href="#text-section">Das Projekt</a></li>
            <li><a href="#projektziele">Projektziele</a></li>
            <li><a href="#gefahresszenarien">Gefahresszenarien</a></li>
            <li><a href="#fakten">Fakten</a></li>
            <li><a href="#aktuelles">Aktuelles</a></li>
          </ul>
        </div>
      </div>
    </nav>
  <!-- Hero Section -->
<section class="hero">
  <img src="img/Coverbild.png" alt="Cover background" class="hero-bg">
  <div class="hero-content">
      <h1>SICHERER  <br>
          DROHNENBETRIEB  <br>
          IM U-SPACE</h1>
  </div>
</section>
    <!-- Text Section Below Hero -->
    <section class="text-section" id="text-section">
      <!-- Wrapper for each block -->
      <div class="text-block">
          <div class="caption">
              <h3>AUSGANGSSITUATION</h3>
          </div>
          <div class="text-content">
              <p>Derzeit werden im regulären Drohnenbetrieb nur einige Informationen von kooperativen Drohnen sowie von der Flugsicherung im Bereich der bemannten Luftfahrt gesammelt und verwertet. Gefahren kommen dagegen oft von außerhalb – z. B. von Wetterereignissen, von Vorkommnissen am Boden wie Großbränden oder Menschenansammlungen sowie von Drohnen und anderen Flugobjekten, die nicht kooperativ oder defekt sind. Um solchen Gefahren effizient entgegenzuwirken, muss man sie rechtzeitig erkennen und einschätzen, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
              <p>Um solchen Gefahren effizient entgegenzuwirken, müssen sie rechtzeitig erkannt und eingeschätzt werden, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
          </div>
      </div>
  
      <div class="text-block">
          <div class="caption">
              <h3>DURCHFÜHRUNG</h3>
          </div>
          <div class="text-content">
              <p>Die Aufgabe ist äußerst komplex und hat viele Facetten:</p>
              <p>Ein hoher Forschungsbedarf ist erforderlich, um mögliche Gefahren in relevanten Szenarien zu analysieren und situationsgerechte Handlungsstrategien vor und während des Drohnenbetriebs zu erarbeiten.</p>
              <p>Eine weitere Herausforderung besteht in der Erschließung der Datenquellen, welche zur frühzeitigen und sicheren Erkennung relevanten Gefahren beitragen können.</p>
              <p>Um die Akzeptanz und Effizienz der Drohnentechnologien, sowie ihre Sicherheit zusätzlich zu erhöhen, müssen auch geeignete, an die Stakeholdergruppen angepasste, Kommunikationsmaßnahmen vorbereitet und durchgeführt werden.</p>
          </div>
      </div>
  </section> 

Great question — you’re on the right track thinking about layout flow and responsiveness!

The issue you’re facing:

Your hero image appears “cut in half” at small screen sizes in mobile preview mode (e.g., 320px width). You’re expecting it to shrink to fit the available width and still be fully visible, but it’s not doing that — despite using max-width: 100%.

The root cause is likely:

  1. You’re applying position: absolute to the image (.hero-bg) with width: 100%, but it’s not inside a relative-positioned container.
  2. Additionally, because you’re using fixed paddings, padding-top: 400px etc., your layout is probably overflowing on small screens without scaling.
  3. No media queries means you’re not adjusting styles based on screen width, so desktop values are enforced on tiny screens.

Fix Step-by-Step

1. Set .hero to position: relative (to constrain the absolutely positioned image)

.hero {
  position: relative; /* Important */
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

2. Make sure your background image scales correctly

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

3. Fix .hero-content to be responsive

Your padding padding-top: 400px pushes the content way down — which becomes problematic on small screens.

Add media queries:

.hero-content {
  padding-top: 200px;
  padding-bottom: 50px;
  margin-left: 30px;
  z-index: 1;
}

@media (max-width: 600px) {
  .hero-content {
    padding-top: 120px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 28px;
  }
}

Final tip: check for horizontal overflow

Add this rule to your CSS:

body {
  overflow-x: hidden;
}

And inspect using Chrome DevTools to look for elements wider than the viewport — those cause your layout to appear “cut off” or “overflowing”.