Div jest za duży

Question

Witam mam pewien problem robię zakładkę z ofertami lecz nie mogę dać ich koło siebie gdyż nie wiem dlaczego wielkość diva 400 x 500 zajmuje całą powierzchnie strony dodam także że wygląda to normalnie

poniżej załączam zdjęcia i kod:

 

css:

.ofer
{
	border-top-left-radius: 15px 10px;
	border-top-right-radius: 15px 10px;
	border-bottom-left-radius: 15px 10px;
	border-bottom-right-radius: 15px 10px;
	font-family: calibri;
	width: 400px;
	height: 500px;
	color: orange;
	background-image: url(img/background.png);
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
}

.kupteraz
{
	border-top-left-radius: 15px 10px;
	border-top-right-radius: 15px 10px;
	border-bottom-left-radius: 15px 10px;
	border-bottom-right-radius: 15px 10px;
	width: 200px;
	color: black;
	text-align: center;
	padding: 5px;
	font-family: Calibri;
	margin-left: 100px;
	background-color: white;
}

.kupteraz:hover
{
	background-color: #a3a2a2;
}

 

html odpowiadający za tego diva

<div class="ofer">
<h1>HTML - STANDARD</h1>
 <h2>- Stworzenie Strony Internetowej&nbsp;<i class="icon-ok-circle"></i><br>
 - CSS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="icon-ok-circle"></i><br>
 - PHP &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="icon-cancel-circle"></i><br>
 - JS  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="icon-cancel-circle"></i><br>
 - Zaawansowane PHP + MYSQL &nbsp;&nbsp; <i class="icon-cancel-circle"></i><br></h2>
<br><br><br><h2>Cena: 19.99 ZŁ<h2>
<div class="kupteraz">
<a href="#"><h3>KUP TERAZ<i class="icon-basket"></i></h3></a>
<i class="icon-cc-paypal"></i>
</div>
</div>

 

Comments

BTW, może zamiast tych: &nbsp;&nbsp; i <br> użyj np. <ul>

przykład  ( + , x - dla demonstracji )

<div class="ofer">
  <h1>HTML - STANDARD</h1>
  <ul>
    <li>
      <span class="title">Stworzenie Strony Internetowej</span>
      <span><i class="icon-ok-circle">+</i></span>
    </li>
    <li>
      <span class="title">CSS</span>
      <span><i class="icon-ok-circle">+</i></span>
    </li>
    <li>
      <span class="title">PHP</span>
      <span><i class="icon-cancel-circle">x</i></span>
    </li>
    <li>
      <span class="title">JS</span>
      <span><i class="icon-cancel-circle">x</i></span>
    </li>
    <li>
      <span class="title">Zaawansowane PHP + MYSQL</span>
      <span><i class="icon-cancel-circle">x</i></span>
    </li>
  </ul>
  <div>
    <h2>Cena: 19.99 ZŁ</h2>
  </div>
  <div class="kupteraz">
    <a href="#"><h3>KUP TERAZ<i class="icon-basket"></i></h3></a>
    <i class="icon-cc-paypal"></i>
  </div>
</div>

.ofer
{
  border-top-left-radius: 15px 10px;
  border-top-right-radius: 15px 10px;
  border-bottom-left-radius: 15px 10px;
  border-bottom-right-radius: 15px 10px;
  font-family: calibri;
  width: 400px;
  height: 500px;
  color: orange;
  background-image: url(img/background.png);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}
.ofer ul {
  font: 700 1.15em/1.25 calibri;
  margin: 0;
  padding: 0 1em;
}
.ofer ul .title {
  display: inline-block;
  width: 70%;
}

.kupteraz
{
  border-top-left-radius: 15px 10px;
  border-top-right-radius: 15px 10px;
  border-bottom-left-radius: 15px 10px;
  border-bottom-right-radius: 15px 10px;
  width: 200px;
  color: black;
  text-align: center;
  padding: 5px;
  font-family: Calibri;
  margin-left: 100px;
  background-color: white;
}

.kupteraz:hover
{
  background-color: #a3a2a2;
}

 

Answer 1

Każdy div to element blokowy co oznacza ze w CSS domyślnie ma display:block; Takie elementy zabierają zawsze całą szerokość kontenera w którym są. Możesz po prostu zmienić display na inline-block. Możesz też skorzystać z właściwości float. 

Najciekawszymi rozwiązaniami  są display flex i display grid które zmieniasz u rodzica. Tutaj masz szybki kurs interaktywny: 

https://flexboxfroggy.com/#pl

Comments

W linku brakuje :  

Answer 2

Zbyt sztywno określasz te wartości, rozdzielczości ekranu może być multum.
Flex-box Grid Bootstrap sprawdz te trzy terminy.