Why the block didn't move left and aren't aligned?-CodePudding

Please see my code on GitHub https://github.com/dariamkh/coursera-test.git

Why aren't they aligned? I need them to be 3 blocks align, but it doesn't work...

Please help!

h1 {
  position: relative;
}

body {
  background-color: lightgray;
}

* {
  box-sizing: border-box;
}

#box1 {
  background-color: gray;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  width: 32%;
  height: 170px;
  float: left;
}

.section1 {
  padding: 10px;
}

#box2 {
  background-color: gray;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  width: 32%;
  height: 170px;
  float: left;
}

#box3 {
  background-color: gray;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  width: 32%;
  height: 170px;
  float: left;
}

#boxes {
  float: left;
  margin-left: 10px;
}

<h1>Our menu</h1>


<div id="boxes">
  <div id="box1">
    <section > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem voluptate facere officia, commodi et similique consectetur in numquam magni quis culpa doloribus voluptatum ipsam sequi qui assumenda iste ab veniam.</section>

    <section id="chicken">Chicken</section>

  </div>

  <div id="box2">
    <section > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem voluptate facere officia, commodi et similique consectetur in numquam magni quis culpa doloribus voluptatum ipsam sequi qui assumenda iste ab veniam.</section>

    <section id="beef">Beef</section>

  </div>

  <div id="box3">
    <section > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem voluptate facere officia, commodi et similique consectetur in numquam magni quis culpa doloribus voluptatum ipsam sequi qui assumenda iste ab veniam.</section>

    <section id="sushi">Sushi</section>
  </div>

</div>

CodePudding user response：

I'd highly recommend leaning flexbox. Here's a great place to start https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The short answer is change #box to be #boxes { display: flex; justify-content: flex-start; } But like I said i'd highly recommend learning flexbox - its a life saver

CodePudding user response：

May be you can put three box in one container Bootstaps Layout

And you can use bootraps to set it up