-1

I try to align three div on the same row but div only display one by row, as if I was using column. Any idea on what's my error ?

Do not hesitate to tell me if you think the error could come somehow from the 'header.php' which is the only other part of my work so far. I'll post HTML and CSS of it here if asked to. 

body {
  background-color: #F1F1F1;
  font-family: 'robotolight';
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
.container {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row nowrap;
  -webkit-flex-flow: row wrap;
  jusitify-content: space-around;
}
.mydiv {
  background-color: #ffffff;
  -moz-box-shadow: 1px 1px 1px 0px #999999;
  -webkit-box-shadow: 1px 1px 1px 0px #999999;
  -o-box-shadow: 1px 1px 1px 0px #999999;
  box-shadow: 1px 1px 1px 0px #999999;
  width: 30%;
  height: 30%;
}
<div id="container">
  <div class="mydiv">
    first div left
  </div>

  <div class="mydiv">
    second div center
  </div>

  <div class="mydiv">
    third div right
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Uj Corb
  • 1,959
  • 4
  • 29
  • 56

1 Answers1

2
  1. You havn't a .container element, you have a #container element.
  2. It's justify-content and not jusitify-content.

Example:

.container {
  align-items: center;
  border: 3px solid #CCC;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  padding: .5rem;
  width: 210px;
}
.box {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>