How do I keep elements aligned to a parent container-CodePudding

I am trying to have a flexbox container with 3 internal boxes, but two of them are being pushed off the parent container. There is space above the .halfcontainers div when I add text, I tried to solve this by setting the margin to 0, but it hasn't done anything.

Image of the problem - [1]: https://i.stack.imgur.com/9H4E2.png

body    {
    margin: 0;
    height: 100%;
}

.container {
    margin: 50px auto 100px auto;
    padding: 0;
    width: 800px;
    height: 500px;
    background-color: rgb(240, 240, 240);  
    border-radius: 10px;
    box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158) ;
    display: flex;
}

.leftcontainer    {
    margin: 0;
    flex: 1 1 0;
}


.rightcontainer {
    margin: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    /* min-height: 100%;
    min-width: 50%; */
}


.halfcontainers {
    margin: 0;
    flex: 1;
    

}

.top {
    margin: 0;
    background-color: rgb(233, 233, 233);
    height: 100%;
    border-radius: 0 10px 0 0;
}

.bottom {
    margin: 0;
    background-color: rgb(209, 209, 209);
    height: 100%;
    border-radius: 0 0 10px 0;
} 

h1  {
    margin: 10px 10px 0px 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
}

p   {
    margin: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
}

<body>
    <div >
        <div >left</div>
        <div >                    
                <div >
                    <div >
                        <h1>Financial Stability</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
                    </div>  
                </div>
                <div >
                    <div >
                        <h1>24/7 Support</h1>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
                    </div>
                </div>
        </div>
    </div>

CodePudding user response：

Add display: inline-block; to bottom and top.

body {
  margin: 0;
  height: 100%;
}

.container {
  margin: 50px auto 100px auto;
  padding: 0;
  width: 800px;
  height: 500px;
  background-color: rgb(240, 240, 240);
  border-radius: 10px;
  box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158);
  display: flex;
}

.leftcontainer {
  margin: 0;
  flex: 1 1 0;
}

.rightcontainer {
  margin: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* min-height: 100%;
    min-width: 50%; */
}

.halfcontainers {
  margin: 0;
  flex: 1;
}

.top {
  margin: 0;
  background-color: rgb(233, 233, 233);
  height: 100%;
  border-radius: 0 10px 0 0;
}

.bottom {
  margin: 0;
  background-color: rgb(209, 209, 209);
  height: 100%;
  border-radius: 0 0 10px 0;
}

.bottom, 
.top {
  display: inline-block;
}

h1 {
  margin: 10px 10px 0px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
}

p {
  margin: 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 12px;
}

<body>
  <div >
    <div >left</div>
    <div >
      <div >
        <div >
          <h1>Financial Stability</h1>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
        </div>
      </div>
      <div >
        <div >
          <h1>24/7 Support</h1>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
        </div>
      </div>
    </div>
  </div>