APEX

I'm using APEX 18.1. I'm using a left side column template for a page without any left side navigation bar (created custom page template as copy of left side column template). The current left side column width of "250px" works fine with actual content on the right side in the content body position. However, when the left side column width  is changed to "350px", the left side column covers some portion of the content body region on the left side. How can shift the content body position relative to the width of left side column width, so that the content body is fully visible. I have tried to do with theme roller and same issue. Here is the sample of my left side column page template "Body" section. any ideas are appreciated.

<div class="t-Body">

#SIDE_GLOBAL_NAVIGATION_LIST#

  <div class="t-Body-main" >

    <div class="t-Body-title" id="t_Body_title" >

      #REGION_POSITION_01#

    </div>

    <div class="t-Body-side" id="t_Body_side" style="width:350px;">

      #REGION_POSITION_02#

    </div>

    <div class="t-Body-content" id="t_Body_content">

      #SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#

      <div class="t-Body-contentInner">

        #BODY#

      </div>

      <footer class="t-Footer">

        <div class="t-Footer-body">

          <div class="t-Footer-content">#REGION_POSITION_05#</div>

          <div class="t-Footer-apex">

            <div class="t-Footer-version">#APP_VERSION#</div> 

            <div class="t-Footer-customize">#CUSTOMIZE#</div>

            <div class="t-Footer-srMode">#SCREEN_READER_TOGGLE#</div>

          </div>

        </div>

        <div class="t-Footer-top">

          <a href="#top" class="t-Footer-topButton" id="t_Footer_topButton"><span class="a-Icon icon-up-chevron"></span></a>

        </div>

      </footer>

    </div>

  </div>

</div>

<div class="t-Body-inlineDialogs">

  #REGION_POSITION_04#

</div>