How to adjust the scale of content and sidebar?

div#primary {
    display: block;
    width: 100%;
}

main#main {
    width: 80% !important;
}

aside.sidebar.widget-area {
    width: 20%;
}

Please try this CSS.

Thanks

@prashantvatsh
Thank you for your reply.

I had put all the script into my blog. But its seems doesn’t work.
As you can see the main content is over wider than normal and the sidebar align to the left abnormally.

What can i do ?

main#main {
margin-right: 0px;
}

Add this also

@prashantvatsh

Thank you Prashant Singh.

After i put the

main#main {
margin-right: 0px;
}

into my css, the position of sidebar moved up normally.

But i want the article text of the content is fully align with the photo.
Any solution?

Thanks

@media only screen and (min-width:800px){
.entry-content {
    text-align: center;
    width: 66%;
    margin: 0 auto;
}
}

Please try this CSS. We can make everything left aligned as well that means image, text and headings left aligned. Right now they are in center.

Thanks

@prashantvatsh

It does not work…
The page seems had not change.

@prashantvatsh

Thank you Prashant Singh, i had fix most of the problem.
but still learning. Really appreciate your help.

Welcome ??