I'm doing a "Code Along" sort-of exercise by Colt Steele's web dev bootcamp on Udemy. Essentially, adding justify-content: space-evenly to ul { doesn't do anything; the elements within ul sit on the left. A workaround I tried was commenting out display: inline from ul, li {, which does work, but bullet points show up. I'm following on the same file I downloaded from Udemy. Can you help me find what I'm missing? Thank you! My code below: PS: This is my very first post, I hope I formatted my question the right way.
body {
font-family: "Open Sans", sans-serif;
}
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 2px solid black;
flex: 1;
max-width: 50%;
display: flex;
/* DOES NOT SPACE EVENLY */
justify-content: space-evenly;
}
ul,
li {
/* CONFLICTS WITH justify-content: space-evenly INSIDE ul */
display: inline;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
h1 {
font-size: 4em;
}
}
@media (max-width: 576px) {
h1 {
font-size: 3em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="starter.css">
</head>
<body>
<nav>
<!-- FLEXBOX PARENT START -->
<a href="#home">Home</a>
<ul>
<!-- FLEXBOX CHILD START -->
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
<!-- FLEXBOX CHILD END -->
</ul>
<a href="#signup">Sign Up</a>
<!-- FLEXBOX PARENT END -->
</nav>
<h1>Media Queries</h1>
</body>
</html>
CodePudding user response:
Using display: inline;
on your ul, li
is affecting the flex
you have on your ul
. The proper way of removing the :marker
's on the ul
is by using list-style-type: none;
on your li
. Doing this solves your space-evenly
issue.
body {
font-family: "Open Sans", sans-serif;
}
h1 {
font-size: 6em;
text-align: center;
}
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
border: 2px solid black;
flex: 1;
max-width: 50%;
display: flex;
justify-content: space-evenly;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
h1 {
font-size: 4em;
}
}
@media (max-width: 576px) {
h1 {
font-size: 3em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="starter.css">
</head>
<body>
<nav>
<!-- FLEXBOX PARENT START -->
<a href="#home">Home</a>
<ul>
<!-- FLEXBOX CHILD START -->
<li>
<a href="#Home">Learn More</a>
</li>
<li>
<a href="#Home">About</a>
</li>
<li>
<a href="#Home">Contact</a>
</li>
<!-- FLEXBOX CHILD END -->
</ul>
<a href="#signup">Sign Up</a>
<!-- FLEXBOX PARENT END -->
</nav>
<h1>Media Queries</h1>
</body>
</html>