How do I get this box to the bottom right corner with FLEX?

Here is my codepen:https://codepen.io/ninabor/pen/BaNvdMa
And here are the classes & rulesets relevant to my issue.

/* LETS TALK button*/
.bottom_right_box {}

.intro_textbox {
  width: 450px;
  height: 238px;
  background-color: white;
  border-radius: 3px;
  text-align: left;
  padding: 20px;
}

.inner_text {
  color: black;
  font-size: 30px;
  margin-top: 1EM;
  margin-left: 1em;
  padding: 2px;
}

.talk_button {
  font-size: 18px;
  text-align: center;
  padding: 7px 10px;
  margin-top: 2.2em;
  margin-left: 1.5em;
}

.intro_color {
  background-color: black;
  padding-top: 5px;
  padding-bottom: 30%;
  min-height: 100%;
  border: 2px solid salmon;
}

button {
  font-family: 'PM Grotesk';
}

How am i suppose to get this BOX TO THE BOTTOM RIGHT CORNER?
I am re-doing this because it was would only look right on my computer because i was using bad practices. But my thing is flexbox sucks very much and it never NEVER works properly when i use it… i thought flex end would work but it didnt I just want the box on the bottom right, i do not want someones leg.

Hi,

Add this code to your pen css:

.bottom_right_box {
  display: flex;
  justify-content: flex-end;
}
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.