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

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?

sarannaelford how did you increase the padding?

sarannaelford added extra padding to each menu link with this CSS:

#access a {
	margin-left: 28px;
}

You could do that, but you would need to adjust the value for your menu because the amount of padding needed will vary depending on the number and size of your menu items.

now there is displayed an "extra black orizontal line" under the name inside the menu (you can see it going with the mouse on one of the name in the menu), How can I fix it?

.menu-mio-menu-container {
     height: 43px;
}

Thank you very much!

#access {
	text-align: center;
}
#access div {
	margin: 0;
}
#access ul {
	display: inline-block;
}

Note that if you've added any other custom CSS for the menu, you may need to adjust it or remove it.

I'm having trouble centering my Navigation Menu?
I'm using customised Twenty Eleven Theme.

.site-title,
.site-description {
	text-align: center;
}

Or you can adjust the horizontal positioning by changing the first 0 to a negative pixel value, i.e. instead of this:
0 0 no-repeat
write this:
-40px 0 no-repeat

But since the image has nothing but white space left and right, the right thing to do would be to crop it in an image editing application to make its width 920px.

I'm very new to CSS and trying to figure out how to play with the custom header feature in the CSS upgrade.

My blog is: hugsnkitchen.com

The standard header size for this theme is 920 x 116, but I wanted to upload a larger image.

I have one that is 1000 x 312, and I found the below code which allows the whole image to show up:
#branding {
background: url('http://hugsnkitchen.files.wordpress.com/2013/04/hugs_n_kitchen_logo_final_1000x312_20133.png') 0 0 no-repeat;
min-height: 300px;
}

The problem, is that it's not centered.

Can someone please help me figure out how to center the image in the header?

Thank you!

I had this in my code:

#secondary {
float: right;
margin-top: 0.7142857142em;
overflow: hidden;
width: 18.90243902%;
}

Now, i do this

#secondary {
float: none;
margin-top: 0.7142857142em;
overflow: hidden;
width: 18%;
margin-left: auto;
margin-right: auto;
}

and it works!

Thank you a lot! :)

#secondary {
float: none;
margin-left: auto;
margin-right: auto;
}

This would center the content within the widgets.

.widget {
text-align: center;
}

My blog is http://ateaoscem.com, and i am using Sundance Theme.

I have a lot of widgets in my sidebar.
However, they are not centered.

I don´t want to change the article width, just center the sidebar.

Thank you!

-Terry

.main-navigation {
text-align: center;
width: 100%;
}

ul.menu {
display: inline-block;
}

I'm looking to centre this navigation bar so as to place both the header image and nav menu smack bang in centre.

Despite my efforts I'm having no success, I was hoping someone here might be able to help me, I'd really appreciate it.