Set display of the div with css

Question

I am trying to set a div responsive but unable to do so. I am trying for almost 8 hours now.

here what I need

I want this cyan text (which is actually a div) to be responsive, but currently, it is overlapping.

* {
  background-color: black;
  color: whitesmoke;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
}

.wrapper {
  max-width: 900px;
  text-align: center;
  padding: 0 50px;
}

.wrapper .title {
  font-size: 1.5rem;
  font-weight: 500;
}

.wrapper .title span {
  font-weight: 700;
  color: tomato;
}

.wrapper .logo-img {
  margin: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width:600px) {
  .wrapper .logo-img img {
    width: 80%;
  }
}

.wrapper .count-down {
  display: flex;
  width: 100%;
  height: 100px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.wrapper .count-down .timer {
  height: 100%;
  width: 100px;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.count-down .timer .numb {
  font-size: 25px;
  font-weight: 500;
}

.count-down .timer .text {
  font-size: 15px;
}

.count-down .clone {
  font-size: 35px;
}

.wrapper .cont {
  margin: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: turquoise;
}

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&family=Raleway:wght@100;200;300;400;500;700&display=swap" rel="stylesheet">
<div class="wrapper">
  <div class="title">
    Our Website is <span>Coming soon</span>
  </div>
  <div class="logo-img">
    <img src="seagrilllogo.png" alt="Logo">
  </div>
  <div class="count-down">
    <div class="timer day">
      <div class="count">
        <div class="numb">00</div>
        <div class="text">Days</div>
      </div>
    </div>
    <div class="clone">:</div>
    <div class="timer hour">
      <div class="count">
        <div class="numb">00</div>
        <div class="text">Hours</div>
      </div>
    </div>
    <div class="clone">:</div>
    <div class="timer min">
      <div class="count">
        <div class="numb">00</div>
        <div class="text">Minutes</div>
      </div>
    </div>
    <div class="clone">:</div>
    <div class="timer sec">
      <div class="count">
        <div class="numb">00</div>
        <div class="text">Seconds</div>
      </div>
    </div>
  </div>
  <div class="cont">this is me</div>

</div>


<script>
  const day = document.querySelector(".day .numb");
  const hour = document.querySelector(".hour .numb");
  const min = document.querySelector(".min .numb");
  const sec = document.querySelector(".sec .numb");
  let timer = setInterval(() => {
    let currentDate = new Date().getTime();
    let launchDate = new Date('june 15, 2021 13:00:00').getTime();
    let duration = launchDate - currentDate;
    let days = Math.floor(duration / (1000 * 60 * 60 * 24));
    let hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((duration % (1000 * 60)) / 1000);
    day.innerHTML = days;
    hour.innerHTML = hours;
    min.innerHTML = minutes;
    sec.innerHTML = seconds;
    if (days < 10) {
      day.innerHTML = '0' + days;
    }
    if (hours < 10) {
      hour.innerHTML = '0' + hours;
    }
    if (minutes < 10) {
      min.innerHTML = '0' + minutes;
    }
    if (seconds < 10) {
      sec.innerHTML = '0' + seconds;
    }
    if (duration < 0) {
      clearInterval(timer);
    }
  }, 1000);
</script>

I am pretty new to web development. I apologize if my question is absurd

Answer 1

Change this:

.wrapper .cont {
    margin: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: turquoise;
}

To this:

.wrapper .cont {
    margin: 20% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: turquoise;
}

@media only screen and (max-width: 540px) {
  .wrapper .cont {
    margin: 40% 0;
    background-color: white;
  }
}

@media only screen and (max-width: 400px) {
  .wrapper .cont {
    margin: 60% 0;
    background-color: red;
  }
}

Adjust max-width to your preferable pixels and adjust margin in percentage (from 40% to whatever looks okay to you). As you can see, you can set multiple @media queries with different max-width and margin. As the screen is getting smaller, the margin changes from 20% to 40% and then to 60%. I also set background-color so you can see exactly when the margin changes. Just remove background colors when using this in your project.

The margin is changed to 40% when the browser window is 540px wide or less and then to 60% when the browser window is 400px wide or less.