I have tried adding this to style.css:

.sidebar, .widget-area, .secondary {
position: absolute
    margin-left: 120px;
    max-width: 250px;
}

But it won't move. If I remove position:absolute, it is pushed down, getting under all the other content.

I have tried adding this to style.css:

.sidebar, .widget-area, .secondary {
position: absolute
    margin-left: 120px;
    max-width: 250px;
}

But it won't move. If I remove position:absolute, it is pushed down, getting under all the other content.

• sidebar
• theme-twenty-seventeen

• The blog sidebar is already in the right side, which sidebar are you referring to? – David Lee Commented Sep 5, 2017 at 14:43
• isn't... isn't the sidebar already on the right sidebar in twenty seventeen? srd.wordpress/themes/twentyseventeen – HU is Sebastian Commented Sep 5, 2017 at 14:44
• Sorry for being unclear, @DavidLee, what I meant was "more to the right". It is already on the right side but it's not as far right as I'd like it. I have corrected the title. – DisplayName Commented Sep 5, 2017 at 15:28
• Pure CSS questions are off topic here. – Pat J Commented Sep 5, 2017 at 15:41

2 Answers 2

You have 2 options:

Option 1.

Just add negative margin to the sidebar CSS like this:

@media screen and (min-width: 48em){
    #secondary{
       margin-right:-150px;
    }
}

Option 2.

Add more max-width to the wrapper:

@media screen and (min-width: 48em){
    .wrap{
        max-width: 1340px;//the default is 1000
        padding-left: 348px;//you have to add padding left so the left side doesnt move, the amount needs to be proportional to the amount of max-width you are incrementing
    }
}

i added the media query, its needed so this CSS doesnt affect the mobile view.

there are 2 pieces of code in the css:

.has-sidebar #secondary {
    float: right;
    padding-top: 0;
    width: 36%;  //change this to change the sidebar width
}

.has-sidebar:not(.error404) #primary {
    float: left;
    width: 58%; //counter the changes above with this code (increase this if you decrease the sidebar etc..
}

if you're looking to change the overall width of the content so that the sidebar moves altogether more to the right than increase the overall wrap width by changing this code:

.wrap {
    max-width: 1000px;  // increase this number to increase the width of your site.
    padding-left: 3em;
    padding-right: 3em;
}

Of course these changes can be made by adding these to your style.css of your child theme