删除.widget-area，.comment-area和.main-navigation之间的空格

Question

My website is www.rosstheexplorer.com.

I am using the Penscratch theme although have modified many aspects of it.

I recently made a number of changes including making my header and navigation bar full width.

One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.

I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.

The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.

Is there a way I can modify the below code so it works regardless of the browser window size.

.widget-area {
    float: right;
    width: 30%;
    margin-top: -350px;
}

#primary.content-area {
    float: left;
    width: 70%;
    margin-top: -350px; 
}

Or is there another completely different solution?

Answer 1

Change the below css

style.css:1932 @screen and (min-width: 75em)
.site {
    max-width: 1153px;
    margin: 400px auto;   // change this to margin: 5px auto;
    padding: 54px 108px;
}


:43 @screen and (min-width: 75em) 
.site {
    max-width: 1153px;
    margin-top: -50px auto; //remove this minus is not recommended
    padding: 54px 108px;  // change this to padding: 0px 108px 54px 108px;
}

kindly change the above margin and padding