title: How to make a website responsively by using padding and width?
body: <p>I just getting started learning about responsive apps.
  When I google it, there is so many ways to do it. Based on my understanding, using % or vh or vw or mind-width. However, I have no idea why my part of not responsible even I assign it with %. I will attach the image below. the number should be shown as 11/30 12/1 1/1 2/2 3/6 4/7 5/8 all of seven numbers. However, there is only 5 or less than 4 3 2 numbers.</p>
  <p><a href="https://i.stack.imgur.com/hakgb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hakgb.png" alt="enter image description here" /></a></p>
  <p>Top of div, I declare with padding: 2%; width: 100vw; and in the number div, I declare with margin-left: 3.5%; margin-right: 3.5%;</p>
  <p>I really appreciate your help!</p>
  <p>I will leave a code below just in case</p>
  <pre><code>&lt;DropDownContainer&gt;
          &lt;DetailKorean&gt;자세히 보기&lt;/DetailKorean&gt;
          &lt;FaChevronDown className=&quot;DetailIcon&quot; /&gt;
        &lt;/DropDownContainer&gt;
        &lt;WeekendScheduleWrapper&gt;
          &lt;WeekendScheduleKorean&gt;일주일 스케줄&lt;/WeekendScheduleKorean&gt;
          &lt;WeekendScheduleDateWrapper&gt;
            {dates.map(obj =&gt; (
              &lt;WeekendScheduleDate&gt;{obj.date}&lt;/WeekendScheduleDate&gt;
            ))}
          &lt;/WeekendScheduleDateWrapper&gt;
  
          &lt;DateInfo&gt;
            &lt;DetailInfoKorean&gt;- 9/13일은 대체 공휴일이에요&lt;/DetailInfoKorean&gt;
            &lt;DetailInfoKorean&gt;- 9/9일은 선거일에요&lt;/DetailInfoKorean&gt;
          &lt;/DateInfo&gt;
        &lt;/WeekendScheduleWrapper&gt;
  </code></pre>
  <pre><code>const BusinessContent = styled.div`
    /* margin: 0 auto; */
    padding: 2%;
    width: 100vw;
    /* min-width: 500px; */
    /* .BarChart {
      width: 360px;
      height: 200px;
      barsize: 15;
      margin: 20px, 30px, --20px, 5px;
    } */
  `;
  // const TestWrapper = styled.div`
  //   padding: 1%;
  //   min-width: 30%;
  // `;
  const DropDownContainer = styled.div`
    display: flex;
    font-size: 40px;
    color: red;
    margin-bottom: 2%;
  
    .DetailIcon {
      font-size: 40px;
    }
  `;
  
  const DetailKorean = styled.span`
    /* margin-right: 10px; */
    margin-bottom: 1.5%;
  `;
  
  const WeekendScheduleWrapper = styled.div`
    padding-top: 1%;
    padding-left: 1%;
  `;
  
  const WeekendScheduleKorean = styled.div`
    font-size: 60px;
    font-weight: 500;
    margin-bottom: 2.5%;
    /* padding-bottom: 70px; */
  `;
  const WeekendScheduleDateWrapper = styled.div`
    width: 100vw;
  `;
  const WeekendScheduleDate = styled.span`
    margin-left: 3.5%;
    margin-right: 3.5%;
    font-size: 60px;
    font-weight: 600;
  `;
  </code></pre>