i need help getting the html and css file to run cohesively . its not displaying the info i want

you can use any background image

HTML CODE

• HOME
• RECIPE DATABASE
• ABOUT US
• CONTACTS
• FAQS

WELCOME TO AISLE HUNTER

SEARCH

EXPLORE MORE

CSS CODE

*

{

margin: 0;

padding: 0;

}

header

{

background-image:linear-gradient(rgba(0, 0, 0, 0.5),(rgba(0, 0, 0, 0.5)) url(bg.jpg);

height: 100vh;

background-size:cover;

background-position:center;

}

.main-nav

{

float: right;

list-style: none;

margin-top: 30px;

}

.main-nav li

{

display: inline-block;

}

.main-nav li a{

color: black;

text-decoration: none;

padding:5px 20px;

font-family: "Roboto", sans-serif;

font-size: 15px;

}

.main-nav li-active a{

border: 1px solid white;

}

.main-nav li a:hover{

border:1px solid white;

}

body{

font-family: monospace;

}

.hero{

position: absolute;

width: 1200px;

margin-left: 0px;

margin-top: 0px;

}

.row

{

max-width:1200px;

margin:auto;

}

h1

{

color: white;

text-transform: uppercase;

font-size: 70px;

text-align: center;

margin-top: 275px;

}

.button

{

margin-top: 30px;

margin-left: 440 px;

}

.btn{

border: 1px solid white;

padding : 10px 30px;

color: white;

text-decoration: none;

margin-right: 5px;

font-size: 13px;

text-transform: uppercase;

}

.bt-one

{

background-color: darkorange;

font-family: "Roboto",sans-serif;

}

.btn-two

{

font-family: "Roboto",sans-serif;

}

.btn-two:hover

{

background-color: darkorange;

transition: all 0.5s ease-in;

}