Есть 5 дивов, нужно чтобы было — 4 в строку, а пятый не зависимо от них. У меня пятый липнет к тем четырём. Как это пофиксить?

Question

[Владлен Шелегин]

<div class="chto_i_umey">

	<h2><b>Что я умею</b></h2>

</div>

<div class="veb_dizain">

	<img src="https://img2.goodfon.ru/wallpaper/nbig/b/d9/minimalizm-logotip-kompyuter-4604.jpg" alt="тут должен быть монитор">


	<h3><b>Веб-дизайн</b></h3>

	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br> Blanditiis repudiandae nam libero laboriosam pariatur ab consequuntur.</p>

</div>

<div class="razrabotka">

	<img src="https://i.pinimg.com/originals/e6/0a/8c/e60a8cd1cd95b7913db41efdd3191190.jpg" alt="тут картинка">
	
	<h3><b>Разработка</b></h3>
	
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br> Blanditiis repudiandae nam libero laboriosam pariatur ab consequuntur.</p>

</div>


<div class="ceo_optimizacia">

	<img src="https://www.modgirlmarketing.com/wp-content/uploads/2016/11/off-page-seo-strategies-2017.png" alt="тут картинка">
	
	<h3><b>CEO-оптимизация</b>></h3>

	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br> Blanditiis repudiandae nam libero laboriosam pariatur ab consequuntur.</p>

</div>

<div class="marketing">

	<img src="https://301consulting.com/wp-content/uploads/2017/04/Depositphotos_62037649_l-2015.jpg" alt="тут рупор">
	

	<h3><b>Маркетинг</b></h3>

	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br> Blanditiis repudiandae nam libero laboriosam pariatur ab consequuntur.</p>

</div>

<div class="keysi">

	<h2><b>Кейсы</b></h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Ullam placeat velit maxime, sit magnam quam.</p>

	<img src="https://vsthemes.org/uploads/posts/2018-03/1582033788_minimalist-coffee_vsthemes_ru-15.jpg" alt="картинка с кофе">
	<style>
		img {width: 250xp;}
	</style>

</div><code lang="css">
.veb_dizain{
	margin-left: 425px;
	margin-top: 25px;
	float: left;
	width: 300px;
}

.veb_dizain img{
	width: 200px;
	height: 150px;
	padding-left: 10%;
}

.veb_dizain h3{
	padding-left: 25%; 	
	margin-top: 20px;
	color: orange;
}
.veb_dizain p{
	margin-top: 20px;
}

.razrabotka{
	margin-top: 25px;
	float: left;
	width: 300px;
}

.razrabotka img{
	width: 200px;
	height: 150px;
	padding-left: 10%;
}

.razrabotka h3{
	padding-left: 25%; 	
	margin-top: 20px;
	color: orange;
}

.razrabotka p{
	margin-top: 20px;
}

.ceo_optimizacia{
	margin-top: 25px;
	float: left;
	width: 300px;
}

.ceo_optimizacia img{
	width: 200px;
	height: 150px;
	padding-left: 10%;
}

.ceo_optimizacia h3{
	padding-left: 25%; 	
	margin-top: 20px;
	color: orange;
}

.ceo_optimizacia p{
	margin-top: 20px;
}

.marketing{
	margin-top: 25px;
	float: left;

	width: 500px;
}

.marketing img{
	width: 200px;
	height: 150px;
	padding-left: 10%;
}

.marketing h3{
	padding-left: 25%; 	
	margin-top: 20px;
	color: orange;
}

.marketing p{
	margin-top: 20px;
}
</code>

Comments

[Ankhena]

Сделайте песочницу на jsfiddle.net или аналоге.
Нарисуйте, как должно быть.

float: left;

Флоаты для сетки перестали использовать уже много лет назад.
Используйте гриды или флексы.

Есть 5 дивов, нужно чтобы было — 4 в строку, а пятый не зависимо от них.

Они же не просто так должны быть вместе?
Оберните их в обертку.
В вашем случае, судя по коду, в ul

img {width: 250xp;}

Нет таких единиц измерения

class="keysi"

Это отвратительно. И все остальные транслиты.

[Антон Литвиненко]

когда почитал названия классов

[Aetae]

veb_dizain

Мог бы хотяб просто на русском писать, и то лучше было бы.)

[Ankhena]

Мне кажется, что выигрывает этот:

class="chto_i_umey"

[Владлен Шелегин]

Ankhena, ахахахаах
я так начал
мне пока как то так обясняют
но спасибо за ответ)

[Владлен Шелегин]

Aetae, сказали по английски надо
я спорить не стал)))
ахахахаха
коменты пушка

[Ankhena]

Владлен Шелегин,

сказали по английски надо

Так у вас не английский....