.main {
width: 100%;
margin: 0px auto;
}

.center {
width: 60%;
}

.left {
width: 20%;
}

.right {
width: 20%;
}

.errText {
border: 4px solid #ff00;
font-size: 30px;
padding: 10px;
}
</style>
</head>

<body>
<div class="main">
<div class="left">a</div>
<div class="center">
<img src="./errImg.png">
<div class="errText">해당 아이디에 대한 정보가 존재하지 않습니다.</div>
</div>
<div class="right">b</div>
</div>
</body>


코드가 위와 같은데 이상하게 영역 분할이 안되고 div들이 한줄씩 개행돼서 나옵니다 원인이 뭔지 모르겠습니다.


한줄에 세개가 가로영역20% /60%/20%로 나오게하고싶은데 왜 그렇게안될까요