changing the CSS in the wordpress-theme 2017: how to do that?

[dil_bert]

good evening dear php-experts.


i just work on the theme- twentyseventeen that runs on a Wordpress-installation - that is - currently in the BETA-BETA mode. So sorry for this.. see the page http://www.f-s-j.de


i want to change content and sidebars width http://www.f-s-j.de

– I’d like to change the width of the content and sidebars on my domain: http://www.f-s-j.de
– I’d like to have a wider content area to show the posts and pages better, then make the sidebar narrower and more to the right.
– And is it possible to modify the percent of the sidebar and content?

additionally: i need to be sure that the after making this change, the padding beside the menu (is) remains small

question: Can I do that through style.css?
guess that i have to do it with this following method:

i need to follow below steps:
1. Login as admin and go on theme customizer Dashboard >> Apperance >> Customize or Click on Custimze link on top bar from front-end.
2. Then navigate Additional CSS and put a ___certain css___ into textarea then click on Save & Publish button.

The question is – which ___certain css___ can be used?

and yes: if it is possible to modify the percent of the sidebar and content – this would be great.

love to hear from you

greetings
dilbert

ps - see the attachment:


see the options i have tried: i tried several code-snippets


 

.wrap {
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
}

and this one too:
 

.pdb-list {
    max-width: none;
    padding: 0;
}


.home .panel-content .wrap {
    max-width: 88%;
}

and this one:
 

.wrap { max-width: 1366px; }

/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}

/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}

and finally this one ...

 

/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
div#primary {
width: 70% !important;
}

To change right side sidebar width

#secondary {
width: 20% !important;
}

or

to change whole site width

.wrap {
max-width: 100% !important;
}

well i am a bit clueless at the moment.

 

Edited December 3, 2017 by dil_bert

[dil_bert]

What about options to use float


the content - primary - could we use  float: left to align the content area to the left border?
The right Sidebar - secondary -  could we align this with  float: right to the right border?



i gaVe it a try .- and did the following:

*/

.div#primary {
width: 70% !important;
 

float: left}



To change right side sidebar width



#secondary {
width: 20% !important;
 float: right}



to change whole site width



.wrap {
max-width: 98% !important;
}

but the floating commands are without any effect. Why is this so?



btw: can we controll with margin also some areas - the padding between Content primary and secondary?


love to hear from you