Issue with my custom CSS sidebar width

Hi! I am currently using the Fruit Shake theme for my personal blog and I have some custom CSS for making the width of the site wider. This is what I have to expand it (below) and I also have different colours. My issue is that I believe it’s expanded my sidebar and it’s causing an issue because anytime I put an image widget, the image is blurry, even if the original is crisp/clear and it’s the correct width as well. Do you know how I can fix this or make my sidebar the same width it should originally be on Fruit Shake? Or anything to stop the blurriness? It’s bothering me a lot as all of my other images are clean and clear and I want the side bar to be the same. They were clear before I made the site wider. But I definitely want to keep the site layout wide, just fix the sidebar issue. Thanks so much in advance. My CSS coding is below.
Lorna.

.secondary #primary {
margin:0 -34.5% 0 0;
}

.secondary #main .widget-area,.secondary #colophon {
width:25.164%;
}

.secondary #page {
max-width:1160px;
}

.secondary #content {
margin:0 33.5% 0 4%;
}

.widget img,object,embed {
height:auto;
}

.widget img {
max-width:90%;
}

.textwidget iframe {
max-width:100%;
}

.widget select {
max-width:100%;
}

.widget {
background:none repeat scroll 0 0 #FFFFFF;
border-bottom:1px solid #E2E294;
color:#7C7C2E;
margin:0 0 1.5em;
padding:20px;
}