CODEWITHSUNDEEP
javascripthtmlcss
Ganesh Sowdepalli
Ganesh Sowdepalli

Reputation: 11

How do I get the list div to align properly with the image div?

To-do List

HTML text-

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="to-do_list.css">

    <title>To-do List</title>
  </head>
<div class="container text-center">
  <div class="header">
    <div class="clear">
<i class="fa fa-refresh" aria-hidden="true"></i>
</div>
<div id="date"></div>
  </div>
<div class="body-container fluid-container">
<ul id="list list-group">
<li class="task list-group-item"><span><i class="fa fa-circle-thin complete"></i></span> Study React <span><i class="fa fa-trash-o delete"></i></span> </li>
<li class="task list-group-item"><span><i class="fa fa-circle-thin complete"></i></span> Water Plants <span><i class="fa fa-trash-o delete"></i></span> </li>
<li class="task list-group-item"><span><i class="fa fa-circle-thin complete"></i></span> Complete Book <span><i class="fa fa-trash-o delete"></i></span> </li>
</ul>
</div>
<div class="add-task">
<i class="fa fa-plus-circle aria-hidden="true""></i>
<input type="text" id="task" placeholder="  Add Task">
</div>
</div>

  <body>

  </body>
</html>

CSS code-

.header{
  margin: auto;
  background-image: url(https://cdn.pixabay.com/photo/2017/10/10/07/48/hills-2836301__340.jpg);
  width: 100%;
  max-width: 400px;
}
.container {
 margin: 120px;
 max-width: 400px;
 width: 100%;
 background: beige;
 border-radius: 15px;
 padding: 15px;
}
.task{
  margin: auto;
  max-width: auto;
  width: auto;
  position: relative;
  }

I tried changing the border, width, margin, and padding, but still couldn't get the two divisions to align properly.

PS: I am very new to coding and web development, was trying out this project I saw. Any and all help is appreciated.

Upvotes: 1

Views: 47

Answers (1)

giosan
giosan

Reputation: 407

use flex in the container class to center what you need, you can also use bootstrap classes d-flex and justify-content-center directly in the html

.container {
 display: flex;
 justify-content: center;
 margin: 120px;
 max-width: 400px;
 width: 100%;
 background: beige;
 border-radius: 15px;
 padding: 15px;

Upvotes: 1

Related Questions