html - 文字消失在容器后面

我有一个问题，在将同级添加到容器后，我的文本消失了。文本在那里，但是由于某种原因，在添加同级元素之后，文本丢失了。我只是在执行摘要后注意到文本位于其容器后面。而数字2的.container宽度不是摘要中的宽度。宽度仍在我的计算机上工作，但仍然..

* {
    margin: 0;
}



body {
    background-color: green;
}


html,
body {
  height: 100%;

}


header {

	height: 20%;
}

#subnav {

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
border-radius: 4px;
justify-content: flex-start;
background-color: orange;
color: white;
height: 5%;


}



.container {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 70%;
    margin: auto;
  background-color: white;

}






.left {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    //flex: 1 20%;
    width: 25%;
}



.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
    width: 60%;
    height: 100%;
}

.right {
 display: flex;
 position: relative;
 flex-flow: row wrap;
 align-content: flex-start;
 justify-content: center;
 order: 3;
 width: 15%;
 flex: 1 50%;

}

div.list{

  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;;

}



.right .list{
    // text-align: center;
    height: auto;
}

.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}






#footer{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
list-style: none;
height: 150px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background-color: orange;
}









#nav li a{
 color: white;
 margin: 15px;
 padding: 20px;
 display: block;;
 text-decoration: none;
 font-size: 24px;
 font-family: courier;
}

#nav li {
 list-style: none;

}


#nav ul{
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 margin: 0;
 flex-flow: row wrap;
 justify-content: center;
 align-items: center;


}


div.logo {

margin: 0 auto;
width: 30%;
height: auto;
text-align: center;
}


#bigwrap{
  height: 100%;
}






.container {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    min-height: 70vh;
    width: 70%;
    margin: 5% auto 8% auto;
    background-color: white;
}

.container p {

  margin-bottom: 12%;

}

.container img {

  margin-bottom: 10%;

}


.left, .middle, .right{
    border-right: 1px solid blue;
}



.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
}




.right .list{
    height: auto;
}



.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}


.right .headbox{
  border-bottom: 1px solid orange;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

        <div id="bigwrap">

           <div id="subnav">

            home home home
           <div>



     <div class="container">
        <div class="left">
        	<img src="filler.jpg" alt="Picture of kid">
            <img src="filler.jpg" alt="Picture of kid">



        </div>
        <div class="middle">
            <div class="box">
              <p>
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text
              </p>


            </div>

              <div class="box">
              <p>
                Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text

             </div>

            <div class="box">
            <p>
               Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
                 Sample Text Sample Text Sample Text
            </p>



            </div>

        </div>

        <div class="right">
            <div class="headbox">
                <h3>Visit Us</h3>

            </div>

            <div class="list">
                   <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Hours</a></li>
                       <li><a href="#">Plan</a></li>
                       <li><a href="#">Directions</a></li>

                   </ul>
            </div>





        </div>
    </div>



	</div>
    

最佳答案

文本在那里，但颜色为白色，背景为color：white。因此它是不可见的。换颜色。