Sidebar Sizing Issue

Hi! I am having an issue with my Sidebar Right Left Column Widget and Right Column Widgets. I cannot adjust the sizes of the columns to make things fit properly. I did not create the orginal CSS and it looks extremely overly complicated to me. There are many lines of code associated with the sidebars and all with fixed widths and not percentages. Could anyone take a look for me?

The issue that raised my concern, btw, was adding a new upcoming events calendar widget, and in doing so it does not display all of the information properly.

Here is all of the Sidebar related code I can find in the child theme.

/*——————–[SIDEBAR]——————-*/
/*————————————————*/
body#home #sidebar {float: left; width: 480px; margin-top: 0px;}
#sidebar { float: left; width: 323px; margin-top: -40px; }
#sidebar a { color: #383737; }
#sidebar div.widget {width: 159px; float: left; background: url(images/pop-ran_bg.png) repeat-x bottom left; margin-left:1px; padding-bottom: 15px; }
body#home #sidebar div.widget { width: 239px; }
div.widget.popular ul li, div.widget.random ul li {border-bottom: 1px solid #d8d8d8; }
div.widget.popular ul li span.title, div.widget.random ul li span.title {font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #383737; font-weight: bold; padding-top:9px; display:block;}
div.widget.popular ul li span.postinfo, div.widget.random ul li span.postinfo {color:#bfbfbf; font-family:Georgia,serif; font-size:11px; font-style:italic; display:block; margin-top:-2px;}

div.widget ul li img{border-right: 7px solid #efefef; float: left; margin-right: 6px; }

div.widget.random h4.widgettitle span, div.widget.archives h4.widgettitle span {border-right: 1px solid #a7a6a6;}
#sidebar h4.widgettitle {padding-left: 2px; background: url(images/widget-title_bg.png) no-repeat top left; color:#6F6F6F; font-family:Georgia,serif; font-size:14px; font-style:italic;
text-align:center; text-shadow:1px 1px 1px #FFFFFF; padding-bottom:0; }
#sidebar h4.widgettitle span {display: block; background: url(images/widget_bg.png) repeat-x; padding:13px; text-align:center;}

#sidebar span.postinfo a { color: #bfbfbf; }

#sidebar .widget ul { margin-bottom:5px; }
#sidebar .widget ul ul { margin-bottom:0; }
#sidebar .widget ul li { background:url(“images/sidebar_bullet.png”) no-repeat scroll 0 9px transparent; color:#262626; padding:3px 0 6px 18px; }
#sidebar .widget ul li ul { margin:0 0 -12px; padding:5px 0 0 7px; }

#sidebar .popular ul, #sidebar .random ul { margin-bottom: 0px; }
#sidebar .popular ul li, #sidebar .random ul li { background: none; padding:0px; }
#sidebar .popular ul li ul, #sidebar .random ul li ul { margin:0px; padding:0px; }

#sidebar .widgetcontent { padding: 10px; }

#tabbed-area { margin-top: -5px; }

#tabbed-area ul#tab_controls li { background: url(images/tabbed-right-separator.png) no-repeat top right; float: left; padding-right: 2px; }
#tabbed-area ul#tab_controls li.first { width: 105px; height: 45px; }
#tabbed-area ul#tab_controls li.first span { background:url(“images/recent-icon.png”) no-repeat scroll 19px 14px transparent; padding-left:40px; }

#tabbed-area ul#tab_controls li.second { width: 100px; }
#tabbed-area ul#tab_controls li.second span { background:url(“images/popular-icon.png”) no-repeat scroll 15px 14px transparent; padding-left:36px; }

#tabbed-area ul#tab_controls li.last { width: 109px; background: none; }
#tabbed-area ul#tab_controls li.last span { background:url(“images/random-icon.png”) no-repeat scroll 11px 14px transparent; padding-left:36px; }

#tabbed-area ul#tab_controls li a, #tabbed-area ul#tab_controls li a span { display: block; color: #6f6f6f; font-family: Georgia, serif; font-size: 14px; font-style: italic; text-shadow: 1px 1px 1px #ffffff; height: 45px; line-height:42px; }
#tabbed-area ul#tab_controls li.active a { background: url(images/tabbed-active-arrow.png) no-repeat bottom center; }
#tabbed-area ul#tab_controls li a:hover { text-decoration: none; }

#all_tabs .widget { width:322px !important; padding-top: 1px; padding-left: 1px; }

#sidebar #onecol .widget { width: 323px; }
#sidebar #firstcol, #sidebar #secondcol { float: left; }
#sidebar #firstcol { width: 160px; }
#sidebar #secondcol { width: 162px; }

body#home #sidebar #firstcol, body#home #sidebar #secondcol { width: 239px; }

#sidebar #firstcol .widget { width: 161px; }
#sidebar #secondcol .widget { width: 162px; }

#sidebar #firstcol .widgetcontent { border-right: 1px solid #d8d8d8; }
body#home #sidebar .widgetcontent { border-right: 0px; }

/*————————————————*/

Here is a view of the site with the Sidebar as best as I can get it, using the calendar widget width adjustment option.

https://www.maitlandpubliclibrary.org/classes/

This is way over my head. Any help would be appreciated. Thank you.