CSS упражнение на блочной модели - не в состоянии решить

Question

Я пытаюсь выполнить онлайн-упражнение CSS & HTML с ожидаемым результатом с учетом ряда ограничений. Ожидаемое решение изображено ниже.

Ограничения - это тип свойств и их вхождений, которые мы можем использовать

• div (4)
• display (1)
• margin (2)
• padding (2)
• border (2)

Также можно выбрать одно из предложенных значений (кроме дисплея) из одного из только после.

• 1px solid (2)
• 20px (1)
• 10px (2)
• 5px (1)

Ожидаемое решение

Моя попытка кода для HTML и CSS выполняется следующим образом. это не выравнивает так же. я использовал только указанные значения

HTML:

<div>Hello</div>
<div></div>
<div class="some-div">
    <div class="world-div">
        World
    </div>
</div>

CSS:

.some-div{
    margin: 10px;
    padding: 10px;
}
.world-div{
    display: inline;
    border: 1px solid;
    margin: 20px;
    padding: 5px;
}

Answer 1

.container{
  display: flex;
}

.world-container{
  margin: 20px;
}

.world{
  border: 1px solid;
  padding: 10px;
}

<div class='container'>
  <div class="hello">
    Hello
  </div>
  <div class='world-container'>
    <div class="world">
      World
    </div>
  </div>
</div>

Надеюсь, что это может решить вашу проблему. Вот ссылка на кодовый блок

Answer 2

Хм, да. Я решил это, но это было странное и запутанное упражнение, так как оно дало вам больше деталей, чем вам нужно.

.wrap{
display: flex;
}
.hello{
}
.world{
border: 1px solid;
padding: 10px;
margin: 20px;
}
.remaining {
border: 1px solid;
padding: 5px;
margin: 10px;
}

<div class="wrap">
  <div class="hello">Hello</div>
  <div class="world">World</div>
  <div clas="leftover"></div>
</div>

Answer 3

Вот код для данного назначения.

HTML

<div class="container">
  <button type="button" class="btn">
    Login
  </button>

   <button type="button" class="btn">
     Signup
  </button>
   <button type="button" class="btn">
     Guest
  </button>
</div>

CSS

.container{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn{
  border:1px solid #333;
  display:inline-block;
  color:#333;
  background-color:#fff;
  box-shadow:2px 3px 0px 0px #000;
  font-size:15px;
  transition:all 0.2s linear;
  cursor:pointer;
}
.btn:hover{
  transform:translate(-5px,-5px);
}
.btn:not(:last-child){
  margin-right:20px;
}

Кодовая ссылка для того же номера https://codepen.io/pranaysharma995/full/RwPpzKz