This problem is happen because most of
the custom blogger template's layout page isn't in appropriately width
of those element mentioned on the question. So it would be very wide and
the bottom scroll will appear more.
To Get started go to blogger dashboard and select Template. Click Edit HTML and Add the Following Code before ]]></b:skin> and Save it
body#layout #header-wrapper {width: 780px;margin: 0;}
body#layout #header {width: 200px;}
body#layout #content-wrapper {width: 760px!important;}
body#layout #main-wrapper {overflow: visible;width: 505px;}
body#layout #rsidebar-wrapper {width: 250px;float: right;margin: 0;}
body#layout .botwid {width: 240px;float: left;margin-left: 5px;}
Customization:
#header-wrapper is the total section of header which may include both sub header.#header is left header.
#content-wrapper is the total section of post and sidebar.
#main-wrapper is post section only.
#rsidebar-wrapper is the right sidebar section. You may have to change the ID of it. If your Sidebar ID is different from this.
.botwid is the footer widgets. You may have to change the class of it. If your footer widget class is different from this.
With the above code, you can change the width and its position. You may also change each ID above if your section ID or class is different. As a result, you will see the widgets and post sections in the Layout (Page Element) of blogger are in proper width and can maximum avoid the more scroll bar on the bottom.