How do I change my container and sidebar width from px to percentage?

Hello. My website uses a responsive theme but, when I checked out my website on a friend’s laptop (which has a smaller screen size than the laptop I designed my website on), the right sidebar was pushed all the way under the left sidebar and towards the bottom of the webpage! The theme’s support forum told me that I have to change both the content width and sidebar width values from pixel to percentage since the container width is set to a percentage value. What is the exact CSS code I need to add to the editor in order to do this? Here is the CSS of the “Layout” section of my website’s editor:

/* =LAYOUT
-------------------------------------------------------------- */

#container {
	width: 100%;
	margin: 0 auto;
}

#main {
	padding: 15px;
    background: #FFFFFF;
}

#main-fullwidth {
    padding: 15px;
    background: #FFFFFF;
}

#content {
    overflow: hidden;
    float: left;
    width: 955px;
    margin-left: 300px;
}

#sidebar-primary {
    overflow: hidden;
	float: left;
    width: 210px;
    margin-left: -1230px;
    border-right: 1px solid #E9EBE8;
    padding-right: 9px;
}

#sidebar-secondary {
    overflow: hidden;
	float: left;
    width: 210px;
    margin-left: 55px;
    border-left: 1px solid #E9EBE8;
    padding-left: 9px;
}