Struggling with expanding li elements to match the container width? Despite tweaking individual widths and Flexbox properties, the desired outcome remains elusive. How can the width of each li be adjusted to align with the container, mirroring the dimensions of the To do List header and the text box?
Visual representation of the webpage can be viewed here: https://i.sstatic.net/7WgR9.png
Provided below is the HTML and CSS code snippet:
body {
font-family: Roboto;
background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
background: -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}
.heading {
background-color: #2980b9;
color: white;
}
.container {
margin-top: 100px;
width: 400px;
padding: 0;
}
ul {
list-style-type: none;
}
.item {
background-color: #fff;
width: 100%;
}
.item:nth-child(2n) {
background-color: #f7f7f7;
}
.header {
font-size: 24px;
font-weight: normal;
}
input {
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row d-flex justify-content-between align-items-center heading">
<h1 class="ml-4 header">TO-DO LIST</h1>
<h4><i class="fa fa-plus mr-2 mt-2" aria-hidden="true"></i></h4>
</div>
<div class="row d-flex">
<input class= "pb-5"type="text" placeholder="Add New Todo">
</div>
<div>
<ul class="row d-flex no-gutter">
<div class="d-flex row item"><li><span>X</span> Row 1</li></div>
<div class="d-flex row item"><li><span>X</span> Row 2</li></div>
<div class="d-flex row item"><li><span>X</span> Row 3</li></div>
</ul>
</div>
</div>
</body>