Modify Column Width of WP Template

[begin2speak]

Hello guys,
I am quite a newb in things of webdesign, coding etc., even though ages ago I was learning a bit of HTML/CSS. Now I want to setup my first blog with Wordpress and Elements. This is what was recommended to me the most in order to create something professional but fast and easy.
I found a Wordpress Template ‘twenty fiveteen’ which I really like, but would just need to make a minor modification.
I would like to have the left column with the navigation a bit more narrow, in order to have my main content column bigger in the center. How can I change this in wordpress?
I think it’s helpful if you see my “website” → www.usegerman.com

Thanks for help!

[PaulOB]

@begin2speak

but would just need to make a minor modification.

Unfortunately the modification you require is not minor as the site has been built with a lot of magic numbers and a lot of old techniques (floats and negative margins) where everything is dependent on everything else as margins and widths are manipulated on each element to create the space needed. (Unless of course your theme has something built in place already but WordPress is not my area.).

From a purely css perspective I could over-ride your styles to give you a wider display but I feel it may be a step too far for you to implement and to maintain in the long run.

As an example you would need this minimum custom code to over-ride the width on that left column.

@media screen and (min-width: 59.6875em) {
  #sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    width: 280px;
    max-width: none;
  }

  #sidebar:before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    background: #fff;
    width: 280px;
  }
  body:before {
    width: calc(50% - 700px);
    background: #fff;
  }

  .site-content {
    width: 85%;
    margin-left: 15%;
  }
  #site-navigation {
    margin-left: 5%;
    margin-right: 0%;
    padding-right: 15px;
  }
  #masthead {
    padding-left: 5%;
    padding-right: 0%;
  }
  .site-footer .site-info {
    padding-left: 5%;
  }
}

@media screen and {
  .site-content .entry-content {
    padding-left: 5%;
    padding-right: 5%;
  }
  .site-footer {
    margin-left: 22%;
    width: 71%;
  }
}

@media screen and (max-width: 1200px) {
  #sidebar {
    position: static !important;
    width: 100%;
    z-index: 99;
    display: block;
    margin: 0;
    max-width: none;
    float: none;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

  #sidebar:before {
    display: none;
  }
  body:before {
    display: none;
  }
  .site-content,
  .site-footer {
    width: auto;
    margin: auto;
    float: none;
  }
  #masthead.site-header {
    margin: 0 0 1rem 0;
    padding: 1rem 5%;
  }

  #site-navigation {
    margin: 0;
    padding: 0;
  }
  #secondary {
    padding: 0 5%;
  }
}

That would produce the display as shown in the screenshot below where you can compare with the original. The new example is the second picture with the CSS injected via the live css editor you can see in the top right corner.

However as the changes are quite drastic they will likely introduce issues further down the line or on other pages that I have not tested.

maybe it would be simpler just to lose some of that 10% padding on the content.g.

@media screen and (min-width: 59.6875em) {
  .entry-content,.entry-summary{
    padding:1rem 2%;
  }
}

If you would rather specific WordPress help then I can move to the appropriate forum.

[begin2speak]

Thanks a lot for your effort!
Since this seems really not that small of a change, I will probably stick to the old one or just take a other template. I thought it’s much easier to change layouts. I want something simple, and I am afraid it will lead to issues all the way in the long run or on other pages, as you mentioned.