How to increase my website content width according to screen resolution using css?

Question

i've been trying to build this blog to post my stuff.

I've started by taking a free theme and making some modifications to colors, shapes, positions, etc.

And in smaller resolutions such as 1366x768, it looks just fine. But in greater resolutions like 1920x1080, there is just too much empty space on the sides. I'm still an amateur on html and css, so I would really appreciate some tips.

Here's the site, as I couldn't post the code, cause stackoverflow seems to think it is spam. https://saturnario.blogspot.com/

Answer 1

You can use percentage on width and play around with it.

body {
    width: 100%;
}

div {
    min-width: 80%;
    width: 800px;
}

min-width will make sure your content cover 80% of the body page. And width will make sure your content is 800px. So when the page size hit one of the limit, it will stlye accrodingly.