How can I change section width (size) of this blogger?

Question

I'm developing a blogger with a free theme. But when I upload a header image, it's too small as you can see below the screenshot and I can't change its size with my knowledge. I want that header image to resize with device width. So I hope your help to solve this problem. I'll attach the Screenshots and the code section also. Thank you!

[Blog header image Preview :Screenshot

Code Part of the section :

<b:section class='header-logo' id='header-logo' maxwidgets='1' name='Header Logo' showaddelement='yes'>
            <b:widget id='Header1' locked='true' title='Wadiya Magazine (Header)' type='Header' version='2' visible='true'>
              <b:widget-settings>
                <b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-0Jp5x8u8s24/YGy7MplFcII/AAAAAAAAAIo/F50IagIa1JEAXSTgIG79pAbC9tHKyLmYgCK4BGAYYCw/s1600/Wadiyamagazine_Logo.png</b:widget-setting>
                <b:widget-setting name='displayHeight'>110</b:widget-setting>
                <b:widget-setting name='sectionWidth'>150</b:widget-setting>
                <b:widget-setting name='useImage'>true</b:widget-setting>
                <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
                <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
                <b:widget-setting name='displayWidth'>310</b:widget-setting>
              </b:widget-settings>
              <b:includable id='main' var='this'>
      <div class='header-widget'>
        <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
        <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='title'/>
      </div>
    </b:includable>
              <b:includable id='behindImageStyle'>
    <b:if cond='data:sourceUrl'>
      <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
      <style type='text/css'>
        .header-widget {
          background-position: <data:blog.locale.languageAlignment/>;
          background-repeat: no-repeat;
        }
      </style>
    </b:if>
  </b:includable>
              <b:includable id='description'>
    <p>
      <data:this.description/>
    </p>
  </b:includable>
              <b:includable id='image'>
      <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
        <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image'/>
      </a>
    </b:includable>
              <b:includable id='title'>
    <h1>
      <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
        <data:title/>
      </b:tag>
    </h1>
  </b:includable>
            </b:widget>
          </b:section>