How do I remove white space from Bartik?

Question

I like to move the left hand side further left to remove the white space, as well as move the right hand side towards the right, so that the centre has more space. I like to remove line wrapping with entries and with the majority of my endusers using widescreen monitors it doesn't look that great.

Essentially I like to move the left and right sidebars towards the edges of their respective edges so the centre can become wider. I tried using the inspector and grepping for the relevant CSS code to modify but none of it seems to work. Nothing else has been modified it is out of the box Bartik theme with no extensions.

Update

.layout-container {

  max-width: 95%;  /* 860px */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media all and (min-width: 95%) {
.layout-container {
max-width: 95%;
 }   
}

/**
  * Main
  */
  .layout-main-wrapper {
   min-height: 300px;
  }
 .layout-main {
   margin-top: 20px;
   margin-bottom: 40px;
 }

This works if I edit the /core/themes/bartik/css/layout.css if I copy the theme and place it in the /themes folder it doesnt work.

Answer 1

First, you should not attempt to manually override and of Drupal's core files (or any other module or theme for that matter) because your changes will be overwritten during updates. So do not search for the CSS and attempt to alter it.

Make a copy of the bartik theme instead, move it to sites/all/themes and rename the folder and the .info file. Finally alter the info file to give your theme a new name.

All Bartik lay-out code can be found in layout.css. So you will have to modify widths and margins there.

Finally, I wanted to make you aware of the Responsive Bartik theme which is already slightly wider for widescreen monitors, but also optimized for mobile phone usage. You might find it usefull to use that instead, or use it as a base theme for your modifications.

Update for Drupal 8

You have the core/themes/bartik/css/layout.css file where you have to alter the max-width for wide screens:

/**
 * Container
 */
.layout-container {
  max-width: 860px; /* <- This is the default width. */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media all and (min-width: 851px) { /* <- Bigger than this means it is a wide screen */
  .layout-container {
    max-width: 1290px; /* <- This is the max-width for wide screens. */
  }
}

Most of the CSS properties are defined in percents and so they should scale along.