Error pada bagian header

Saya sedang membuat website menggunakan html5 , css3 namun  ketika saya ingin mengetik text baru pada div baru , text tersebut muncul pada sebelah header bukan dibawahnya.image.pngimage.pngimage.pngimage.pngberikut html saya : <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title> Pembelian </title>    <link rel="icon" href="asset/icon.jpg">    <link rel="stylesheet" href="index.css">    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
</head><body>    <div class="background">        <aside class="menubar">            <div class="logo">                <a href="" class="alogo"><i class="fa fa-store"></i> Pembelian </a>                                <ul class="ul1">                    <li>                        <a href=""> <i class="fa fa-home"></i> Home </a>                    </li>                </ul>
                <ul class="ul2">                    <li>                        <a href=""> <i class="fa fa-sign-in-alt"></i> Login</a>                    </li>                    <li>                        <a href=""> <i class="fa fa-registered"></i> Register</a>                    </li>                    <li>                        <a href=""> <i class="fa fa-shopping-basket"></i> Pembelian </a>                    </li>                    <li>                        <a href=""> <i class="fa fa-database"></i> Management Data </a>                    </li>                </ul>            </div>        </aside>
        <div class="top">            <header class="hdr">                <div class="headcont">                    <button class="bar"> <i class="fa fa-bars"></i> </button>
                    <div class="ssi">                        <ul class="ul4">                            <li>                                <h3> Sekolah Sistem Informasi</h3>                            </li>                        </ul>                    </div>
                    <div class="admin">                        <ul class="ul3">                            <li>                                <h3><i class="fa fa-user"></i> Administrator </h3>                            </li>                        </ul>                    </div>                </div>            </header>        </div>
dan berikut css saya :
 *{    padding: 0;    margin: 0;    list-style-type: none;}.background{    background-color: rgba(18,19,23,1);    height: 947px;    display: flex;}.menubar{    background-color: rgba(26,28,35,1);    z-index: 20;}@media (min-width:768px) {    .menubar{        display: block;    }}.logo{    padding: 20px;}.alogo{    text-decoration: none;    color : white;    font-size: x-large;    margin: 16px 16px 16px 16px;}.ul1{    padding-top: 48px;    padding-bottom: 0px;}.ul1 li{    box-sizing: border-box;    display: list-item;    padding: 12px 16px 12px 16px;}
.ul1 a{    text-decoration: none;    color: white;    font-size: large;    align-items: center;    display: inline-flex;    width: 100%;}.ul1 i{    margin-right: 15px;}
.ul2{    display: block;    margin-block-start: 0px;    margin-block-end: 0px;    margin-inline-start: 0px;    margin-inline-end: 0px;    padding-inline-start: 0px;}
.ul2 li{    position: relative;    padding: 12px 16px 12px 16px;}.ul2 a{    text-decoration: none;    color: white;    font-size: large;    align-items: center;    display: inline-flex;}.ul2 i{    margin-right: 15px;}
.top{    width: 100%;    display: flex;    flex-direction: column;    flex: 1 1 0%;}.hdr{    display: block;    background-color: rgba(26,28,35,1);    z-index: 10;    padding-top: 36px;    padding-bottom: 36px;
}
.headcont{    color: rgba(202,191,253,1);    padding-left: 20px;    padding-right: 20x;    margin-left: 0;    margin-right: 0;    display: flex;    justify-content: space-between;    height: 100%;    align-items: center;    width: 100%;   
}@media (min-width :768px) {    .headcont{        max-width: 768px;    }}
.bar{    padding: 5px;    margin-left: -5px;    margin-right: 20px;    cursor: pointer;    display: inline-block;}
@media (min-width : 768px) {    .bar{        display: none;    }}.ssi{    align-items: center;}.admin{    flex-direction: column;}.mid{    height: 100%;    overflow-y: auto;    display: block;    justify-content: st;}
        <main class="mid">            <div class="content">           <h2> wwfwfwf w</h2>            </div>
        </main>
    </div></body></html>
avatar albertwijaya

@albertwijaya

1 Kontribusi 0 Poin

  • Kode kamu sulit dibaca, coba taro di tag kode dan dirapikan agar bisa dibantu - @hilmanski


Jawaban

Belum ada Jawaban, jadi yang pertama

Login untuk gabung berdiskusi
premium logo tube

Hey, sedang ada diskon premium untuk akses semua kelas. Lihat di sini