#main, .site-footer {
    margin: auto;
}

Not sure why the code display is weird but the proper code should be:
.home .post.category-event .thumbnail {display: none;}

Normally, you can fix this by editing the theme's PHP files. Sadly, WordPress.com does not allow us to edit those files. :|

BUT you can make do by hiding the box for the thumbnail using CSS code, only for posts of the event category. This will require the Custom Design upgrade (found here).

You can try the upgrade before buying it first. Go to this page and look for the "I’m not sure if the Custom Design upgrade is for me. Can I try before I buy?" part.

When it instructs you to edit your CSS, add this piece of code at the bottom of the file:
<br /> .home .post.category-event .thumbnail {<br /> display: none;<br /> }<br />

In the code above, replace "event" with the name of the category you wish to hide. Take note that this will hide ALL images/coloured boxes for all posts of the event category in your homepage. Even if you add a featured image to the, event post, it won't show up.

If this works for you and you think it's worth $30 per blog, per year, you can decide whether to purchase the CSS upgrade or not. :)

Thanks in advance

if I copy paste the source code from the safari menu, copy paste it on the display CSS window, will I keep the design originally generated by the template without loosing any information?

Nope, you should not do that unless you are advanced at CSS.

if not, how can I keep the original generated design and have it transfered as CSS code into that window?

You should only add updates to the CSS editor in the Appearance → Themes → Customize → CSS panel unless you want to delete all of the theme's original CSS to completely start from scratch with a blank slate.

To see the current CSS, just use the browser tools built in to your web browser. In Safari, go to Preferences → Advanced and check the "Show Develop menu in menu bar" to turn on the developer tools. Then load your website, right-click on any item, and select the "Inspect Element" option. that will pull up a view of the HTML for what you clicked on as well as all the CSS that applies to that element on the right. Once you find the selectors in the CSS that match what you want to change, you can write new CSS rules (or copy individual blocks from the web inspector) and put them in your WordPress.com CSS editor to make changes to your blog's appearance.

I customized my site through the templates available on WordPress (the columnist). After upgrading in order to be able to modify the design and personalize the site, I am brought to a new page where I can change the CSS code. Unfortunately the original CSS code does not appear on the right hand display window. I am only given a welcome text. I would like to keep the original design from the template and its CSS code to modify a few details within it (such as centering and such...).
I have the following questions:
if I copy paste the source code from the safari menu, copy paste it on the display CSS window, will I keep the design originally generated by the template without loosing any information?
if not, how can I keep the original generated design and have it transfered as CSS code into that window?

You need to set a featured image of the exact dimensions required by the theme.

Featured Images
If you assign a feature image to one of your posts it will display differently depending on which template you are viewing. For instance: on the home page as well as all other pages that display multiple posts, your featured image will appear cropped at 180 pixels wide by 180 pixels tall. In cases where your original uploaded featured image is 610 pixles wide or wider, it will also appear at the very top of single posts and pages.

Setting a featured image > http://en.support.wordpress.com/featured-images/#setting-a-featured-image
If you don’t see the Featured Image module on your Add New or Edit Post page, please make sure you’ve selected Featured Image in your Screen Options. http://en.support.wordpress.com/screen-options

.placeholder {
display: none;
}

I've been slogging through and finally came across the relevant command or declaration as regards Youtube -- why these things are not readily made available by WordPress or others (as though they were arcana) passes all understanding.

Because using that selector is not the best way to adjust those (or at least not common).

One other thing: if you're referring to the box with a number in pixels on the CSS control panel, for setting a width for videos, etc.,

Exactly, the videos should get inserted at content width size (set in the Appearance → Themes → Customize → CSS panel). That should work so long as you haven't added any other specific size rules, like the Vimeo one currently has in the example you linked or with some other CSS.

Let's step back. What is your end goal exactly? Is it to make video embeds the same size as the content width, or a different size?

But have you any idea what might be preventing a horizontal scroll bar from appearing?

The overflow property set to hidden for the #page element is causing that. A rule like that is usually added to clear floats. It wouldn't be good advice to remove without researching the theme a bit more because presumably the rule was added by the theme author for a good reason, and it could break the layout in unexpected ways.

Basically I want to have the exact say front page layout with headers like this: http://thecolumnist.info/

Thanks for your help by the way, I greatly appreciate it!

There are many common errors, misunderstandings and misconceptions when creating custom menus and you can read about them here. > http://wpbtips.wordpress.com/2011/12/19/custom-menus/

I was wondering is there anyway to have the Titles for each of the Categories be displays on the front page of this theme?

(Kinda like The Columnist theme for the .org version of the Columnist: http://thecolumnist.info/)

Thanks!

TheColouredZebra

It's ".youtube-player."

Currently I'm hunting for the correlate command for Vimeo, but haven't yet found it. (And for the Soundcloud widgets, too.)

This post includes both Youtube and Vimeo videos:

http://musicuratum.com/2012/12/31/through-rooms-of-music-heidi-locher-and-frederick-paxtons-hotel-kalifornia/

Whereas I've dealt with the Youtube ones, you'll notice that the Vimeo one is still governed by the coding I've put in for Iframes, which now governs e.g. the (relatively few) Bandcamp players I've embedded on my site -- and I'm probably going to convert the Soundcloud widgets I have embedded to the Iframe format as well. But because I've styled the Iframes with a certain optical effect, I need to find the code for the Vimeo players (which are also Iframes) in order to counteract it for them.

(The categories and tags for single posts I did manage to configure -- though not yet completely. I've been trying to make enough sense of Firebug to be able to identify the elements I still want to alter, but without success. Do you happen to know the CSS handles of these elements?)

I agree we need to see an example link. Without one, it's hard to make guesses, especially since you've already modified CSS.

Also, if you are inserting the videos at full width and you have adjusted the main column content width via CSS, make sure you have also adjusted the content width setting in the Appearance → Themes → Customize → CSS panel to match.

And the categories and tags look positioned next to the text column on the right. Am I looking at the right thing? Do you still need help with this issue?

"Widgets will not appear in any template where multiple posts are displayed."

Are you trying to get them to display on the front page, or single post pages?