Cara Membuat Background Fullwidth dengan HTML CSS

Cara Membuat Background Fullwidth dengan HTML CSS - Trend website saat ini adalah menggunakan section untuk membuat tampilan website memiliki background penuh dari ujung kiri sampai ke ujung kanan, pada artikel kali ini saya akan membuat salah satu contoh dalam menggunakan konsep website fullwidth. Baiklah, sekarang simak tutorial berikut.

1. Membuat Struktur HTML yang Benar
Hal yang harus di perhatikan adalah pembuatan struktur html yang benar, karena nantinya akan memberikan kemudahan untuk kita saat mengatur layout menggunakan css. Berikut ini adalah struktur html yang bisa kalian gunakan.

<!DOCTYPE html>
<html>
<head>
    <title>Full Width Background</title>

</head>
<body>
<header>
    <div class="container">
        <div class="left">
            <h1>Left</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="right">
            <h1>Right</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</header>
</body>
</html>

2. Memberikan CSS Pada masing – masing elemen HTML
Berikut ini adalah css yang kita gunakan untuk memberikan style agar dapat terbentuk section dengan background fullwidth

*{margin:0;padding: 0}
.container{
    width: 800px;
    margin: auto;
}
header{
    background: lightgreen;
    overflow: hidden;
}
.left{
    float: left;
    width:300px;
}
.right{
    float: right;
    width:300px;
}

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat background fullwidth dengan html css, dengan begitu kita bisa juga terapkan konsep ini ketika kalian menggunakan bootstrap nantinya. Semoga bermanfaat