Here is my code snippet:
.blueleft {
background-color: white;
width: 300px;
border: 25px #cee2e8;
padding: 25px;
margin: 40px;
float: left;
font-family: "berlin sans fb";
color: gray;
font-size: 20px;
text-align: center;
vertical-align:middle;
}
.blueright{
background-color: white;
width: 300px;
border: 25px #cee2e8;
padding: 25px;
margin: 40px;
float: right;
font-family: "berlin sans fb";
color: gray;
font-size: 20px;
text-align: center;
vertical-align:middle;
}
Despite the styling, the boxes are appearing horizontally instead of vertically like this:
https://i.sstatic.net/Fzs8g.png
I am struggling to figure out how to stack the div boxes vertically while maintaining the ability to format them horizontally and keep them centered. I have searched for solutions but haven't found any code that works when inserted into my HTML document... How should I approach starting over with CSS formatting for the DIV elements?