How to keep the main content within its borders on a category page

Hey.  

First of all, great theme, I really like it!   Now, I recently changed my sidebar width to 300px, as I wanted to make more room for ads, social widgets etc. So, I added the following code to the wp_head:

<style>
@media (min-width: 1110px) {
/* Main */
#main > .container > .row {
background-position: 760px 0;
}

#primary {
width: 700px;
}

.news-slider .carousel {
width: 480px;
}

.news-slider .carousel-inner,
.news-slider .carousel .item,
.news-slider .carousel .carousel-inner .hentry {
height: 100%;
}

.news-slider .carousel-list {
width: 219px;
}

#secondary {
width: 300px;
}

#secondary .entry-thumbnail img {
width: 300px;
}

.single .site-content > .post .entry-content {
max-width: 530px;
}
}
</style>

And this to the wp_footer:

<script><br /> var height = jQuery(‘.news-slider’).height();<br /> jQuery(‘.news-slider .carousel’).css(‘height’, height);<br /> </script>

Now, on the frontpage, everything looks fine, but once I go to a category page and show it in the grid-view, take a look at what happens: http://i.imgur.com/cd2xziB.png  

As you can see, nothing is wrong on the frontpage. It only seems to happen when I go to a category page.  So, how can I fix this?      I look forward to hearing from you.