I am working on a custom section in my HTML/CSS project where I have implemented a circular text effect. However, I am facing issues with adjusting the width and height of the container holding this circular text. Additionally, I want to apply other CSS properties to this container to better control its appearance and positioning. Below is the relevant part of my code:

<style>
  .circular {
    position: relative;
    width: 300px; /* Adjust the width here */
    height: 300px; /* Adjust the height here */
    border-radius: 50%;
    overflow: hidden;
  }

  .circular span {
    font: 26px Monaco, MonoSpace;
    position: absolute;
    width: 20px;
    transform-origin: bottom center;
  }

  .char1 { transform: rotate(12deg); }
  .char2 { transform: rotate(24deg); }
  .char3 { transform: rotate(36deg); }
  .char4 { transform: rotate(48deg); }
  .char5 { transform: rotate(60deg); }
  .char6 { transform: rotate(72deg); }
  .char7 { transform: rotate(84deg); }
  .char8 { transform: rotate(96deg); }
  .char9 { transform: rotate(108deg); }
  .char10 { transform: rotate(120deg); }
  .char11 { transform: rotate(132deg); }
  .char12 { transform: rotate(144deg); }
  .char13 { transform: rotate(156deg); }
  .char14 { transform: rotate(168deg); }
  .char15 { transform: rotate(180deg); }
  .char16 { transform: rotate(192deg); }
  .char17 { transform: rotate(204deg); }
  .char18 { transform: rotate(216deg); }
  .char19 { transform: rotate(228deg); }
  .char20 { transform: rotate(240deg); }
  .char21 { transform: rotate(252deg); }
  .char22 { transform: rotate(264deg); }
  .char23 { transform: rotate(276deg); }
  .char24 { transform: rotate(288deg); }
  .char25 { transform: rotate(300deg); }
  .char26 { transform: rotate(312deg); }
  .char27 { transform: rotate(324deg); }
  .char28 { transform: rotate(336deg); }
  .char29 { transform: rotate(348deg); }
  .char30 { transform: rotate(360deg); }
  .char31 { transform: rotate(372deg); }
  .char32 { transform: rotate(384deg); }
  .char33 { transform: rotate(396deg); }
  .char34 { transform: rotate(408deg); }
  .char35 { transform: rotate(420deg); }
  .char36 { transform: rotate(432deg); }
  .char37 { transform: rotate(444deg); }
  .char38 { transform: rotate(456deg); }
  .char39 { transform: rotate(468deg); }
</style>

<h1 class="circular">
  <span class="char1">W</span>
  <span class="char2">e</span>
  <span class="char3">'</span>
  <span class="char4">r</span>
  <span class="char5">e</span>
  <span class="char6">t</span>
  <span class="char7">h</span>
  <span class="char8">e</span>
  <span class="char9">b</span>
  <span class="char10">e</span>
  <span class="char11">s</span>
  <span class="char12">t</span>
  <span class="char13">i</span>
  <span class="char14">e</span>
  <span class="char15">t</span>
  <span class="char16">h</span>
  <span class="char17">a</span>
  <span class="char18">t</span>
  <span class="char19">y</span>
  <span class="char20">o</span>
  <span class="char21">u</span>
  <span class="char22">c</span>
  <span class="char23">a</span>
  <span class="char24">n</span>
  <span class="char25">b</span>
  <span class="char26">e</span>
  <span class="char27">y</span>
  <span class="char28">o</span>
  <span class="char29">u</span>
  <span class="char30">r</span>
  <span class="char31">s</span>
  <span class="char32">e</span>
  <span class="char33">l</span>
  <span class="char34">f</span>
  <span class="char35">w</span>
  <span class="char36">i</span>
  <span class="char37">t</span>
  <span class="char38">h</span>
  <span class="char39">.</span>
</h1>

Currently, I have hardcoded the width and height of the .circular container to 300px, but I when I change it to 160px, nothing changed. Here are my questions:

• How can I make the width and height of the .circular container 160px?
• What is the best way to apply additional CSS properties to this container without affecting the circular text effect?
• Are there any best practices for managing the positioning of the circular text spans within the container when the container size changes?

Any help or guidance would be greatly appreciated. Thank you!