What would be the best way to make the column widths adapt to different resolutions?

Question

HTML

What would be the best way to make the column widths adapt to different resolutions?
one.

<div class="container">
      <div class="row">
      <!-- Content
      ================================================== -->
      <main role="main" class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
          {content}
            </main>	
      <!-- / Content
      ================================================== -->
      
      
      
      <!-- Sidebar
      ================================================== -->
      <aside class="d-none d-sm-none d-md-none d-lg-block col-lg-4 d-xl-block col-xl-4">
          Right Sidebar
      </aside>	
      <!-- / Sidebar
      ================================================== -->
    </div>
  </div>

2.

<div class="container">
      <div class="row justify-content-center">
      <!-- Content
      ================================================== -->
      <main role="main" class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-6">
          {content}
            </main>	
      <!-- / Content
      ================================================== -->
      
      
      
      <!-- Sidebar
      ================================================== -->
      <aside class="d-none d-sm-none d-md-none d-lg-block col-lg-4 d-xl-block col-xl-3">
          Right Sidebar
      </aside>	
      <!-- / Sidebar
      ================================================== -->
    </div>
  </div>

Answer 1

What are you worried about?
About extra 10-100 bytes of page code?
Visually, you have 1 in 1 :)
I could also add
<div class="text-center"></div>and hang another "center" on the block above, is this a crime against layout?
and spit apples on me, but I would have put more effort to remove the excess from the bootstrap. There you can win 10-50kb ....