Box sizing problem

I have a problem with box-sizing. I created 2 boxes that define product prices. They were good in column order. I wanted to change them to row order. When I tried, they became so thin. I can’t fix it.

A few things sort of jump out at me:

#pricing {
	display: flex;
	width: 20px;

What is the purpose of setting width to 20px? That doesn’t seem like enough width to display text in.

.level {
	border: 2px solid darkgreen;
	text-align: center;
	margin-left: 200px;
	margin-right: 200px;
	max-width: 500px;
	box-shadow: 2px 2px 2px 2px;

If you are using flexbox to display elements then you shouldn’t need to use side margins because flexbox gives you plenty of ways to put space between elements in a row.

1 Like

I am not used to doing display stuff. So I am trying new width and height sizes for testing and understanding better. Thanks for helping tho

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