hi everybody i hope you are well. im working in project and when i Refreshment my chrome all content changed and change is on the left my project and when i gave padding to left and right those are not balance. i guess problem is in class container.

  <header class="header">
      <div class="container">
        <div class="flex-content">
          <section class="right_menu">
            <section class="section-logo-header">
              <img src="../icons/logo.webp" class="logo_header" />
            </section>
            <nav class="nav_header">
              <ul class="ul_header">
                <li class="hover_li1 li1">
                  
         <a href="#" class="flex_menu_header">
          فرانت اند
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow_menu arro_icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
         </a>
                  
                  <nav class="nav_submenu1">
                    <ul class="subul_header_li1">
                      <li class="subli1_menu_header"> 
                          <a href="#" class="hover_link_header">   اموزش html</a>
                      </li>
                      <li class="subli1_menu_header">
                                   <a href="#" class="hover_link_header"> اموزش  css </a>                        
                      </a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش flexbox</a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش flexbox</a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش grid</a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش طراحی اصولی طراحی قالب</a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش تخصصی js</a>
                      </li>
                      <li class="subli1_menu_header">  
                        <a href="#" class="hover_link_header">اموزش vscode</a>
                      </li>
                    </ul>
                  </nav>
               
                </li>

                <li>
               <a href="#" class="flex_menu_header">
                بک اند
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow_menu">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
               </a>
                
                </li>

                <li>
               <a href="#" class="flex_menu_header">
                امنیت
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow_menu">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
               </a>
               
                </li>

                <li>
            
                  <a href="#" class="flex_menu_header">
                    مقالات
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow_menu">
                      <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                  </a>
               
                </li>

                <li>
                     <a href="#" class="flex_menu_header">
                      ارتقاع مهارت ها
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow_menu">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                      </svg>
    
                     </a>               
                </li>
              </ul>
            </nav>
          </section>

          <section class="left_menu">
            <div class="form_search">
              <input
                type="search"
                class="search_inpt"
                placeholder="چی میخوای یاد بگیری"
              />
              <button class="btn-header-icon">
                <img
                  src="../icons/search_24dp_5F6368_FILL0_wght400_GRAD0_opsz24 (1).svg"
                  class="search_icon"
                />
              </button>
            </div>
            <button class="icon_person_header">
              <img
                src="../icons/person_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg"
                class="person_icon"
              />
            </button>
            <button class="icon_moon_header">
              <img
                src="../icons/bedtime_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg"
                class="moon_icon"
              />
            </button>
          </section>
        </section>
      </div>
    </header>

.container {
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;

}

i gave width 100% and 100vw but its problem didnt solve for me .