width content/ frame around sidebar

@veer:
Here are the codes:
<hr>
I would also like to create a black line under: “meest recente berichten” ( the text should be 1 line, instead of tw0) and “Recente reacties”. What would be the code for that?
* For this, please remove following code:

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

and add in this one:

.sidebar-primary .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

————————————————————————–
Thereby, I would like to have a black line above the footer and the footer should be a bit smaller.

/* Add black line above footer */
#colophon {
    border-top: 1px solid #000000;
}

/* Decrease footer */
#site-generator {
    padding-bottom: 0px; /* Increase/decrease to add space on top of footer */
    padding-top: 0px; /* Increase/decrease to add space on bottom of footer */
}

————————————————————————–
I would like to have a frame around very post seperately.

.home #main article .archive-post-wrap {
    border: 1px solid;
    padding: 20px; /* Increase/decrease to add/remove space between border and content */
}

————————————————————————–
I would like to add a bit more space between the two columns and less space between the right column and the sidebar. How can I change this?
* After adding above code, there should be more space between the posts. Let me know if you want more space and I will provide you code for it. ( I am not providing the code now because I need to see how it looks after you have added the code. )
For space between sidebar and content, use following code:

.sidebar-primary {
    width: 400px;
}

————————————————————————–
Note: Now, there might be some issues in mobile devices, once you are done adding the codes, please let me know and I will provide you with code for other devices too.

Please replace the codes with this one:

@media screen and (min-width: 1024px){
    #content .wrapper {
        width: 1300px; /* Increase/Decrease the size that suits to your need */
    }

    /* Use following to increase main content width too if needed */
    #main {
        width: 850px; /* Increase/Decrease the size that suits to your need */
    }

    .sidebar-primary {
        width: 400px;
    }
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

.sidebar-primary .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

/* Add black line above footer */
#colophon {
    border-top: 1px solid pink;
}

#site-generator {
    padding-bottom: 0px; /* Increase/decrease to add space on top of footer */
    padding-top: 0px; /* Increase/decrease to add space on bottom of footer */
}

.sidebar-primary section {
    border: 1px dotted pink;
    padding: 20px; /* Remove this if you do not want any space between widgets and border */
}

I have made responsive edits as well.

Let me know how it goes.