How do I center-justify the navbar?
I think that the problem is with the display: flex. I have tried:
display: inline-block;
text-align: center;
justify-content: center;
on the ul tag. This doesn't seem to work. Is there a way to bypass the display: flex associated problems?
I have margins and padding set to 0. Also, is there a way if I could set my whole website between 300px margins?
Source code:
* {
margin: 0;
padding: 0;
}
body {}
h1 {
font-weight: normal;
font-size: 40px;
font-family: 'Black Han Sans', sans-serif;
}
.menu-1 {
display: inline-block;
text-align: center;
justify-content: center;
}
.menu-1 ul {
width: 800px;
justify-content: center;
display: flex;
list-style-type: none;
background-color: #e9e9e9;
border: 0.5px solid #000000;
}
.menu-1 ul li {
width: 150px;
flex: 1;
border-left: 0.5px solid #000000;
font-size: 14px;
font-family: 'Jua', sans-serif;
}
.menu-1 ul li a {
display: block;
padding: 8px;
text-decoration: none;
color: black;
}
.menu-1 ul li:hover a {
background-color: #ddd;
text-decoration: none;
border-top: 0.5px solid black;
}
.menu-1 ul li:active a {
background-color: black;
color: white;
text-decoration: none;
}<!DOCTYPE html><html lang='en, ko'><head><title></title><link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet"><style></style></head><body><br><div class="headings"><h1><img src="logo_refined2.jpg" alt="Logo_Img" width="80" height="45"><a href="#" style="text-decoration: none; color:black;">간장공장</a></h1></div><nav class="menu-1"><ul><li style="border-left:0.5px solid #e9e9e9;"><a href="#">커뮤니티</a></li><li><a href="#">식단</a></li><li><a href="#">갤러리</a></li><li><a href="#">마켓</a></li></ul></nav></body></html>
