Oversized text in a static page

Question

I’m currently working on a weather app, but when I was doing the design, I ran into a problem with the space around a large character. In the image below, I’ve centered the section with the degree and tree containers, but the character has an enormous container, and because of that, they don’t appear to be centered. What I want is for the container to fit the font.

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

* {
  background-color: #e8e8e8;
  font-family: "Space Grotesk", serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
}

main {
  margin: 80px 85px;
  border: red 1px solid;
  flex: 1;
  position: relative;
}

.first-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.first-section .cityName {
  font-size: 168pt;
  font-weight: 00;
}

.first-section input {
  width: 400px;
  height: 60px;
  border-radius: 20px;
  top: 60px;
  right: 0;
  position: absolute;
  text-align: center;
  font-size: 20pt;
  font-weight: lighter;
}

.second-section {
  display: flex;
  justify-content: space-between;
  bottom: 0px;
  position: absolute;
  width: 100%;
  border: solid 1px rgb(57, 23, 179);
  align-items: center;
}

.second-section .square-wrapper {
  display: flex;
  gap: 80px;
}

.second-section .square-wrapper .square {
  height: 300px;
  width: 150px;
  border-radius: 20px;
  border: solid 1px blue;
}

.second-section .p-wrapper p {
  font-size: 300pt;
  font-weight: 500;
}

<main>

  <div class="section-wrapper">
    <section class="first-section">
      <!--CityName-->`your text`
      <div class="cityName">Brazil</div>
      <!--Input-->
      <input type="text" placeholder="Search"></input>
    </section>

    <section class="second-section">
      <!--squares-->
      <div class="square-wrapper">
        <div class="square">Rain</div>
        <div class="square">Moon</div>
        <div class="square">Wind</div>
      </div>
      <!--Degree-->
      <div class="p-wrapper">
        <p>12°</p>
      </div>
    </section>
  </div>

</main>

I tried removing the margin for the main container because I want to position the 3 divs and the degree a little bit lower due to the oversized container around the degree. However, the ideal solution would be for the container to fit the character perfectly.