What`s wrong? HTML

Question

i made the <div> container like this:
<div id="services clearfix">
<div class="item">
<img src="img/img4.svg" width="124px" height="124px" alt="Услуга">
<h2>Web-дизайн и разработка сайтов</h2>
<p>Создаю дизайн сайтов и лендингов. Учитываю все ваши пожелания. Пишу эргономичный код.</p>
</div>
<div class="item">
<img src="img/img2.svg" width="124px" height="124px" alt="Услуга">
<h2>Круглосуточная поддержка</h2>
<p>Никогда не пропадаю, всегда на связи. Поддержка 24/7</p>
</div>
<div class="item">
<img src="img/img3.svg" width="124px" height="124px" alt="Услуга">
<h2>Приемлимые цены, любая сложность</h2>
<p>Не завышаю цены. Работаю по политике цена=качество.</p>
</div>
</div>
and then stylish it with css :
.item {
width: 300px;
float: left;
text-align: center;
}
.item h2 {
font-size: 25px;
margin-bottom: 15px;

}
.item p {
color: #333333;
font-size: 20px;
line-height: 35px;

}
.item:last-child {
float: right;
margin-top: 100px;
margin-right: 250px;
margin-bottom: 100px;
}
.item:nth-child(2){
margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;
}
.item:first-child {
margin-top: 100px;
margin-left: 180px;
margin-bottom: 100px;
}
when i try to open next <div> container in html, new words is displaying on the top side on the previous container. What i did wrong? Help please

Answer 1

I've had a good look at your code, take a look at the changes I made here:

https://code.sololearn.com/WIHIhRj16XvJ/#html

If you go through the CSS I've made some notes explaining what I've done. I gave each of your item divs a different background colour so you can see the space they cover - I find this really helpful when testing because you can make sure you're targeting the right element.

I'd advise doing some tutorials on what float/padding/margin do, because they can really disturb the layout of your page if you get them wrong.

Answer 2

Hey, I don't quite understand your problem; I put what you posted into CodePlayground and it displayed fine.

Could you put your complete code into CodePlayground so its easier to see? Or maybe a screenshot of how the problem displays?

Answer 3

thank you so much! i finally get it, what i`ve done wrong. thanks again! :)

Answer 4

hello Rincewind! Thanks for your reply. I create a new code into CodePlayground, the last part (last section in HTML called contacts) perceived as part of the previous container, and i cant understand why so. When i try to write a new style in css, for example new background-color, it applied to all previous container too :( (also if you will run this code you can see my problem, last part display on the middle in previous)