<!DOCTYPE html>
<html lang=ko>
    <head>
        <meta charset="UTF-8"> 
        <title>전국두릅김치권리증진위원회</title>
        <link rel="stylesheet" href="2.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="1">
            <div class="background">
                <div class="high_bar">
                    <input type="search" placeholder="Search">
                        <ul class="menu">
                            <ol>Home</ol>
                            <ol>About</ol>
                            <ol>Service</ol>
                            <ol>Contact</ol>
                        </ul>
                </div>

            </div>

        </div>
        
        <div id="gay">
            <h1>포브스선정, 최고의 슈퍼ㅡ푸드 두릅</h1>
            <h4>두ㅡ릅 김ㅡ치</h4>
         </div>
    </body>
</html>


html은 요렇고


*{
    padding: 0px;
    margin: 0px;
    color:black;
    list-style:none;
    text-decoration: none;
    border-collapse: collapse;
    font-family: 'Noto Sans KR', sans-serif;
}

.background{
    background-image:url("back.jpg");
    width:cover;
    height:700px;
}
.high_bar{
    display: flex;
    
}
input{
    height:40px;
    width: 300px;
    margin-left: 10px;
    margin-top:17px;
}
.menu{
    display:flex;
    margin-left: 84px;
    justify-content: flex-end;
    margin-top:10px;
}
.menu > ol{
    margin-left: 250px;
    font-size:35px;
}
input::placeholder{
    font-size: 30px;
}
#gay{
    width:100%;
    margin: 50px auto 231px auto;
    text-align: center;
}


CSS는 이러함


백그라운드에 h1 h4를 올려놓고싶은데 어캄?