html - float div to left of parent div not working

Question

With my current code, how do I make the purple div stick to the left side of the green div? I tried float:left which didn't work. I got close when adding position:absolute; and left:50%; to my purple div class but when the screen resized the div fell off screen. Is there a quick way to float the purple div to the left of the green one so it's not in the center?

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display:flex;
}

#logo {
  left:0px;
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;

}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="logo"></div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65645977/float-div-to-left-of-parent-div-not-working

Answer 1

Try like this.

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display:flex;
}

#logo {
  left:0px;
  width: 100%;
  margin:auto;
  margin-left: 0;
  max-width:calc(80vh - 25px);
  background-color:purple;

}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="logo"></div>
  </div>
</div>