Hỏi về vấn đề lỗi chia layout

Chang_Pham · March 24, 2019, 5:29pm

Chào mọi người ạ
Em chỉ muốn hỏi là em chia cái layout chính theo grid, em không biết phải làm sao để bây giờ cái trang browser width của nó chỉ có 800px để vừa khít với cái div container của em để nó k bị trắng ra bên ngoài như hình dưới

Em thử khai báo nguyên html là 800px nó cũng k hiệu quả
Em cảm ơn mn ạ
Sẵn tiện mn cho em hỏi có cách nào khắc phục lỗi này hông ạ @@

Code css của em là:

*{
    box-sizing: border-box;
}
html,body{
    margin: 0px;
    padding: 0px;
    width: 800px;
}
img{
    vertical-align: middle;
   transform: scale(0.5);
}
.container{
    width: 800px;
    background-color: lightblue;
    display: grid;
    width: 100%;
    grid-template-columns: 400px 400px;
    grid-template-rows: 50% 20% 18% 12%;
    grid-template-areas: 
    "picture picture"
    "zerotohero zerotohero"
    "list list"
    "image image"
}

kisuluoibieng · March 25, 2019, 2:31am

https://www.w3schools.com/howto/howto_css_center_website.asp

<style>
    #page {
        max-width: 800px;
        margin: 0 auto;
    }
</style>

...
<body>
    <div id="page">

    </div>
</body>