Title: CSS centering problem
Last modified: August 21, 2016

---

# CSS centering problem

 *  [UpFrom100](https://wordpress.org/support/users/upfrom100/)
 * (@upfrom100)
 * [13 years ago](https://wordpress.org/support/topic/css-centering-problem/)
 * Hello there,
 * People have been really helpful on these forums and I can’t wait until I can 
   return the favour by helping others out. However, I’ve still got a couple of 
   questions yet!
 * First is a basic CSS problem : I can’t get my logo and navigation menu both centered
   on the page on [http://www.flouroflondon.com](http://www.flouroflondon.com). 
   I assume I should be editing this in my child theme’s style.css file via the 
   editor? Not sure this is the place to ask for specific code help, but if so I’d
   be really grateful.
 * I’m also getting all sorts of errors when I try to validate my page on the WC3
   validation page. I assume this is because it’s my first attempt at CSS and it’s
   written very poorly?
 * Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years ago](https://wordpress.org/support/topic/css-centering-problem/#post-3918983)
 * > I assume I should be editing this in my child theme’s style.css file via the
   > editor?
 * Correct assumption.
 * > Not sure this is the place to ask for specific code help, but if so I’d be 
   > really grateful.
 * What have you tried so far?
 *  Thread Starter [UpFrom100](https://wordpress.org/support/users/upfrom100/)
 * (@upfrom100)
 * [13 years ago](https://wordpress.org/support/topic/css-centering-problem/#post-3918987)
 * Here’s my whole stylesheet (it’s not that long). It’s a total mess – that’s pretty
   much the only thing I’m sure of.
 *     ```
       @import url('../twentytwelve/style.css');
   
       .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation 		.current_page_item > a, .main-navigation .current_page_ancestor > a {
       	color: #000;
       	font-weight: bold;
       }
   
       .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
       	border-bottom: none;
       	border-top: none;
       	display: inline-block !important;
       	text-align: center;
       	width: 100%;
       	padding-left: 1.4em;
       }
   
       .main-navigation li a {
       	border-bottom: 0;
       	color: #594D49;
       	line-height: 3.692307692;
       	text-transform: capitalize;
       	white-space: nowrap;
       	margin: 0 5.857142857rem 0 0;
       	position: relative;
       	font-size: 16px;
       	letter-spacing: .09em;
       	margin-right: 100px;
       	font-weight: bold;
       }
   
       .main-navigation li a:hover {
       	color: #000;
       	font-weight: bold;
       }
   
       /* only target browsers wider than 979px */
       @media (min-width: 979px) { 
   
       /* position logo absolutely so it's outside the flow of html and effectively on top of the menu */
       img.header-image, img.wp-post-image {
       	border-radius: 0;
       	box-shadow: 0 0 0 rgba(0,0,0,0);
       	float: left;
       	position: absolute;
       	left: 50%;
       	margin-left: -60px;
       	display: inline;
       	padding: 0;
       	width: 136px;
       	z-index: 1;
       }
   
       /* shift menu down so it logo doesn't sit on top of it */
       #menu-navigation-menu {
       	margin-top: 40px;
       }
   
       body {
       	font-size: 14px;
       	font-size: 1rem;
       	font-family: Helvetica, Arial, sans-serif;
       	color: #594D49;
       }
   
       #menu-item-220 {
       	left: 60px;
       }
   
       #menu-item-89 {
       	right: 13px;
       }
   
       #menu-item-92 {
       	left: 115px;
       }
   
       #menu-item-93 {
       	left: 33px;
       }
   
       #header-image {
       	bottom: 20px;
       }
   
       .site-header {
           padding: 0.714rem 0 4rem;
       }
   
       .nav{
           border:1px solid #ccc;
           border-width:1px 0;
           list-style:none;
           margin:0;
           padding:0;
           text-align:center;
       }
       .nav li{
           display:inline;
       }
       .nav a{
           display:inline-block;
           padding:10px;
       }
   
       img#wpstats {display:none}
       ```
   
 * _[please mark any posted code – [http://codex.wordpress.org/Forum\_Welcome#Posting\_Code](http://codex.wordpress.org/Forum_Welcome#Posting_Code)]_
 * As the menu items weren’t centering, I sort of ‘guestimated’ by eye and used 
   padding and such to move things around. Now everything is ‘around’ the right 
   place, but one can still tell that everything isn’t perfectly aligned when one
   looks at the page.
 * I’m sure there must be a simpler way of going about it. Thinking I could erase
   a lot of what I’ve got there as I’m sure some isn’t even doing anything (probably
   where all my errors are coming from)…just a bit nervous to touch anything as 
   the site is live!
 * Thanks!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years ago](https://wordpress.org/support/topic/css-centering-problem/#post-3918990)
 * To make it easier on us, can you point out which CSS you used to center the elements(
   that isn’t working)?
 *  Thread Starter [UpFrom100](https://wordpress.org/support/users/upfrom100/)
 * (@upfrom100)
 * [13 years ago](https://wordpress.org/support/topic/css-centering-problem/#post-3918992)
 * Sorry…I THINK it’s:
 * .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom:
   none; border-top: none; display: inline-block !important; **text-align: center;**
   width: 100%; padding-left: 1.4em; }
 * But I’m not really sure :/

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS centering problem’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [validation](https://wordpress.org/support/topic-tag/validation/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [UpFrom100](https://wordpress.org/support/users/upfrom100/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/css-centering-problem/#post-3918992)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics