Aligning elements

HTML-CSS
1

Tell us what’s happening:

Hi out there.
I cannot seem to find why the h1 heading is not the same width as the listed items below. Does anyone have a suggestion? The code is posted below.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
>
<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="main">
    <h1>My To-Do List</h1>
    <ul class="todo-list">
            <li>
                <input id="eating" type="checkbox"/>
                <label for="eating">Explore food</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=TI2NBlKjyYM" target="_blank">Like chicken</a></li>
                </ul>
            </li>

            <li>
                <input id="drinking" type="checkbox"/>
                <label for="drinking">Drink liquids</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://c.tenor.com/SsRiyKjCzDUAAAAC/tenor.gif" target="_blank">Like water</a></li>
                </ul>
            </li>

            <li>
                <input id="warranty" type="checkbox"/>
                <label for="warranty">Rinse</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">With water</a></li>
                </ul>
            </li>

            <li>
                <input id="specs" type="checkbox"/>
                <label for="specs">Repeat</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">Often</a></li>
                </ul>

            </li>
        </ul>
        </div>

    </div>

</body>

</html>

/* file: styles.css */

#main {
  max-width: 400px; 
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  }

h1 {background-color: tan;
font-family: arial;
padding: 10px;
border-radius: 10px; 
border: solid 3px yellow}

body {background-color: navy;
}

.todo-list { 
list-style-type: none;
}

.todo-list > li {
margin-bottom: 5px;
background-color: tan;
border: solid 2px yellow;
border-radius: 10px;
font-family: arial;}


ul {margin-bottom: px;

li {padding: 5px;
  font-weight: bold;}

a {text-decoration: none;}

.sub-item-link {text-decoration: none; color: red;}
.sub-item-link:hover {color: blue; background-color: yellow;}
.sub-item-link:active {color: pink;}
.sub-item-link:visited {color: brown}
.sub-item-link:focus {outline: green;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

hello! I believe it is because the ul element always has a default padding-left. That is causing the listed items’ width to appear smaller than the h1 heading. :))

1 Like
3

Thanks for the reply. So, it’s not possible for h1 and ul to be aligned along the same vertical position?

4

I’ve found the solution in the CSS: ul {margin-bottom: 5px; padding-left: 0px;}

Thanks so much for the help! :folded_hands:

1 Like