That CSS is specific to single posts, not portfolio posts, so it makes sense that it wouldn't work on different types of pages because the HTML and CSS class names are different for each post type in this case.
I checked http://katemada.wordpress.com/ and clicked Portfolio in the menu at the top right. Then I clicked on the first item to get to this page:
I see a portfolio description there that starts with the text, "Vivarium: [latin] a place of life; an enclosure to," and I think that might be what you want to move.
Would making both areas full width help? Here's a snippet that will make portfolio areas full width, as well as the portfolio description:
In this scenario, the portfolio description will fall to below the main content area on the portfolio page.
Also, if you used that CSS snippet, it wouldn't make the images bigger, just the content container where the images are housed. To make the images embed full width, you would need to adjust the Content Width setting in the Appearance > Customize > CSS panel to match the new width for the expanded content area. A width like 996px might work best. You should test it though because I'm not sure how it would affect regular posts. Whether or not the image expand at that point will also depend on how the images were inserted. They may need to be re-inserted before the new size settings take effect.