CSS Flexbox unordered list is a bit unaligned compared to the h1

Question

I am trying to center my unordered list with my h1, I have my unordered list within a flexbox however it just simply doesn't work and is a bit off to the right and I can see the padding is a bit weird.

body {
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
}

header nav {
    display: flex;
    justify-content: center;
}

header h1 {
    margin: 0%;
}

header nav ul {
    list-style-type: none;
}

header nav ul li a {
    color: black;
    text-decoration: none;
}

header nav ul li {
    display: inline;
}

<!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">
    <link rel="stylesheet" href="css/main.css">
    <title>Home page</title>
</head>
<body>
    <header>
        <h1>Kaihans Webbsida</h1>
        <nav>
            <ul>
                <li><a href="#">Historia</a></li>
                <li><a href="#">Intressen</a></li>
                <li><a href="#">Framtiden</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

I have tried changing where I have my flexbox, however despite the changes, it just doesn't work.

`ul` gets a `padding-left` assigned by default from the user agent stylesheet, you need to explicitly overwrite that. — CBroe, Sep 07 '21 at 12:51

score 1 · Answer 1 · answered Sep 07 '21 at 12:54

Unordered list have a default padding adding padding-left: 0 fixed it. read MDN Reference

body {
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
}

header nav {
    display: flex;
    justify-content: center;
}

header h1 {
    margin: 0%;
}

header nav ul {
    list-style-type: none;
    padding-left: 0
}

header nav ul li a {
    color: black;
    text-decoration: none;
}

header nav ul li {
    display: inline;
}

<!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">
    <link rel="stylesheet" href="css/main.css">
    <title>Home page</title>
</head>
<body>
    <header>
        <h1>Kaihans Webbsida</h1>
        <nav>
            <ul>
                <li><a href="#">Historia</a></li>
                <li><a href="#">Intressen</a></li>
                <li><a href="#">Framtiden</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Thanks alot, this works great but how can I add margin/gap to my list items? How would I do that? Should I make them flex items as well? — , Sep 07 '21 at 13:13

score 0 · Answer 2 · answered Sep 07 '21 at 12:54

Adding padding-inline-start: 0; to header nav ul fixes that.

body {
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
}

header nav {
    display: flex;
    justify-content: center;
}

header h1 {
    margin: 0%;
}

header nav ul {
    list-style-type: none;
    padding-inline-start: 0;
}

header nav ul li a {
    color: black;
    text-decoration: none;
}

header nav ul li {
    display: inline;
}

<!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">
    <link rel="stylesheet" href="css/main.css">
    <title>Home page</title>
</head>
<body>
    <header>
        <h1>Kaihans Webbsida</h1>
        <nav>
            <ul>
                <li><a href="#">Historia</a></li>
                <li><a href="#">Intressen</a></li>
                <li><a href="#">Framtiden</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS Flexbox unordered list is a bit unaligned compared to the h1

2 Answers2