Increase Content Spac For Left Sidebar

Can you link to a page with the issue?

This is the site: https://malaysiannews.info/

By the way how do I reduce the gap or spacing between the side-bars and the main content area. Sorry for not using the appropriate terms.

The advert puts the padding in itself, so that means you can’t remove that padding. The issue is actually a failing in the advert code. Can you go back to the advert’s vendors and highlight the issue with them?

o.k. Thank you.
How do I increase the width of both sidebars and reduce the spacing between the sidebar and the main content? Can you help me with the coding?

Try:

@media screen and (min-width: 700px) {

    #sidebar-secondary-wrap {
        margin-right: -20em;
        width: 20em;
    }

    .main-inner {
        padding-left: 20em;
    }

}

Now the left sidebar is way too wide until the fine boxed-up line of the sidebar merges with the boxed-up line the main content.

How do I reduce the gap between the sidebars and the main content?

Do you have a specific amount in pixels that you want the sidebar widened? I don’t want to play a cat and mouse game suggesting code that is too wide.

This is the default CSS code of sidebar.

.layout-content-sidebar1 .main-inner {
padding-left: 0;
width: 100%
}
.layout-sidebar1-content .main-inner {
padding-left: 0;
float: none;
width: 100%
}
.layout-sidebar1-content .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar1-content #content {
float: right
}
.layout-sidebar1-content #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}
.layout-sidebar2-content .main-wrap {
margin-right: 0
}
.layout-content-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-content-sidebar2 .main-wrap {
margin-right: 0
}
.layout-content-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar2-sidebar1-content .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar2-sidebar1-content #content {
float: right
}
.layout-sidebar2-sidebar1-content #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}
.layout-content-sidebar1-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-content-sidebar1-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar1-content-sidebar2 .main-inner {
float: left;
padding-left: 0;
padding-right: 20rem
}
.layout-sidebar1-content-sidebar2 #sidebar-secondary-wrap {
margin-right: 2rem;
margin-left: -20rem;
float: right
}
.layout-sidebar1-content-sidebar2 .main-wrap {
margin-right: 0;
margin-left: 34rem
}
.layout-sidebar1-content-sidebar2 #content {
float: right
}
.layout-sidebar1-content-sidebar2 #sidebar-primary-wrap {
float: left;
margin-right: 0;
margin-left: -34rem
}

The original left sidebar (sidebar 2) is wider. I have already have it customized. This is the code:

.main-wrap {
float: none;
margin-right: 20rem;
}

#sidebar-primary-wrap {
float: right;
margin-right: -18rem;
max-width: 100%;
width: 18rem;
}

Now what I like to have is to reduce the spacing between the sidebar and the main content to be narrower.