Adding a float makes margin non-working.

Hello there! I have 2 div blocks running one after the other. Adding a float for any of the layers, no matter what value, makes margin non-working. One of the objects seems to stick to the top of the page. If the float is removed, the layers can be moved freely. How to get rid of this effect? And what can this be related to? Thank you in advance.

by ratus

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>store</title>	
<link  rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div class="fone35"> 
<img src="imges/Sound Store-39.png" alt="lom"/>
<img src="imges/Sound Store-38.png" alt="lom"/>
<img src="imges/Sound Store-37.png" alt="lom"/>
<img src="imges/Sound Store-36.png" alt="lom"/>
<img src="imges/Sound Store-35.png" alt="lorem"/>
</div>
<div class="fone65">
<img src="imges/Sound Store-59.png" alt="lom"/> 
<img src="imges/Sound Store-61.png" alt="lom"/>
<img src="imges/Sound Store-63.png" alt="lom"/>
<img src="imges/Sound Store-65.png" alt="lom"/>  
</div>
</div>
</body>
</html>

CSS

body {
  background: #0a122d;
  margin: 0;
  width: 1200px;
}

.fone35 {
  width: 100px;
  overflow: hidden;
  padding: 10px;
  float: right;
  margin-bottom: 200px;
  margin-left: 50px;
  margin-right: 20px;
  margin-top: 300px;
}

.fone65 {
  width: 100px;
  padding: 20px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 100px;
  display: inline;
  overflow: hidden;
}

.container {
  width: 1000px;
  margin-top: 300px;
}