Customizing certain appearance elements via CSS

Hi there,

You can mostly control those settings via Appearance → Customize → Layout (Container, Header, Navigation, Sidebars, Footer). GP Premium’s Spacing module covers container padding, header padding, etc.

I’d recommend using the Customizer settings where possible, since that’s the easiest and most reliable way.

If you still prefer to override via CSS, here are examples for some of them:

/* Container content padding */
.site .inside-article {
  padding: 20px 30px; /* top-bottom, left-right */
}

/* Header padding */
.site-header {
  padding: 15px 25px;
}

/* Primary nav menu item width / height */
.main-navigation ul.menu > li > a {
  min-width: 120px;
  height: 50px;
  line-height: 50px; /* vertically align text */
}

/* Sub-menu item width / height */
.main-navigation .sub-menu li a {
  min-width: 150px;
  height: 40px;
  line-height: 40px;
}

/* Sidebar widget padding */
.widget {  padding: 15px;
}

/* Sidebar widths */
.widget-area-left {
  width: 25%;
}
.widget-area-right {
  width: 25%;
}

/* Footer widget area padding */
.footer-widgets {
  padding: 30px 20px;
}

/* Footer main padding */
.site-footer {
  padding: 20px 0;
}

/* Copyright area */
.site-info {
  padding: 10px 0;
}