Помогите решить проблему с отступом в css

Question

Не могу до конца переместить объект изображение, он как будто упирается в другой. Вот cайт на codepen.in https://codepen.io/Farlock/pen/BaopyPj

a{
	color:#ff00cc;
	font-size:32px;
}
#pink{
	color:#ff00cc;
	font-size:32px;
}
#black{
	color:#ff00cc;
	margin-left:900px;
}
#logo{
	margin-left:1150px;
	margin-top:-500px;
	border-radius:30px;
	}
#ap{
	color:#ff00cc;
	font-size:110px;
	margin-top:5px;
	margin-left:650px;
}
body{
	background-color:black;
}
#shap{background-color:#1d1d1d;
	height:20px;
	border-radius:30px;
	width;60px;
	height:110px;
	padding:30px;
	

}
#titlelg{
	margin-left:390px;
}
#str{
	margin-top:50px;
	margin-left:1250px;
}
#poisks{
	margin-top:50px;
}
#mains{
	margin-left:80px;
	margin-bottom:30px;
	
}
#gallery{
	margin-left:110px;
	margin-bottom:30px;
}
#movies{
	margin-left:130px;
	margin-bottom:30px;
}
.button:hover{
	box-shadow:1px 7px 7px #ff00fc;
}
#Block1{
	height:20px;
	border-radius:30px;
	width:700px;
	height:1500px;
	margin-left:1200px;
	margin-top:-823px;
}
#vidos{
	margin-right:10px;
}
#frame1{
	margin-left:1270px;
	margin-top:600px;

<!DOCTYPE html> 
<html>
	<head>
		<div>
		<img id="titlelg"src="https://psv4.userapi.com/c856324/u311528575/docs/d13/4b3f77b82c06/title.png?extra=es0Jo-AuJUHHF12qGkJA6VH8nBccgmL9pgVkZJjJ83KJatnAFFWwQQFWUQXRpBszUr1-Mm7DxY4wYLMt47ZAqvkk6eCVcrNjRjhlomQW4NUC54J56eUyLZPE-554bVOq_j_XKX8j3NE-M_hROvVkXnWkcw"widht="70" height="70"/>
		</div>
		<div id=shap>
		<a href="test.html"><img id="shaplg"src="https://psv4.userapi.com/c856320/u311528575/docs/d7/b083cc441f9b/Logo.png?extra=5OLHxwUEX1H4TB_SlEpDpU7MCVBUx9nf_i0qUo3jrN8O0jYc09UrQ7WZoGwVEy29FGD0eXt_2vW8ajBD_pTUns_tx_ppiV-nL2amM6-DCbBfGbaDd21MAB59kXeE96QquEJR5P78Ved_0czDo8tSYCENqg" widht="130" height="130"/></a>
		<a href="test.html"><img id="mains"class="button"src="https://psv4.userapi.com/c856332/u311528575/docs/d12/079df631e009/Main.png?extra=_klkEkaE_r2xvpc2GtHVHFDVm18U8xeqPOkVy_wyknUEoh5zBZ6ZctEDQj5bbFUqz3cafqVPRg2b-whuSBy6W4FhAdTDeSt2tKxKfet8h_l57g3MgxKX3zIjbjUfFpbvZK4iBdNJY4Wl-ZmeW1_f5xrDgg" widht="32" height="32"/></a>
		<a href="test.html"><img id="gallery"class="button"src="https://psv4.userapi.com/c856324/u311528575/docs/d18/d1c1587669fe/Gallery.png?extra=qFvaDthAngpvSl6UtH5worzyQPzkTWbB86JziM6HYe8qDLZo6Q5SHU2PjglnTVbUg-0N3Y-DkBnu1bPE4B9wyMuyE7m-ks5csYOSrGLt-OWCFkTzjuuwp65BWICvWL6aQSPqtMESoapnSm-sEDjM7kZcWA" widht="33" height="33"/></a>
		<a href="page1.html"><img id="movies"class="button"src="https://psv4.userapi.com/c856528/u311528575/docs/d3/5365958d46fd/Movies.png?extra=BZ1Jjsx7Y_IsFkwce8NEeq75jGCnrfNoKE6hl42u1TtlsVSu3SGsF0uLroR0y69m7G97g-ZwFuZnfHETpz7rcR-hk40zMKcbX6N8OwQsPDfFqVPoNpHfIyqXIudYAootZicW4DbRAsaUrWt4689hWzy_Sw" widht="35" height="35"/></a>
		</div>
		<meta charset="UTF-8"/>
		<title>
		Home</title>
		<img src=""/>
		<link href="styles.css" rel="stylesheet" type="text/css"/>
	</head>
		<body>
			<div id="videohos">
			<div>
			<video id="vidos" width="1170" height="560" controls="controls" autoplay>
			<source src="video/LMV.mp4                                          " type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
			</div>
			</div>
			<div><a id="frame1"href="page2.html"><img id="prv"src="https://sun1-22.userapi.com/8pOkZWETm1CZDolLw4ptWRc-IuGPT-p8QmHUQg/-BbgfD3OkFQ.jpg"widht="350" height="350"/></a></div>
			<div id="Block1"style="background: #1d1d1d ;">Block1</div>
			
			</body>
</html>

Answer 1

Во первых, тег <head> нельзя использовать так, как вы его используете. Он служит для управления подключаемых файлов и мета разметки

Во вторых, вы пытаетесь позиционировать #frame1 (ссылку). Вам необходимо задать её свойства display:block; - чтобы ссылка стала блоком и добавить в неё наследование позиции position:relative. А картинке внутри ссылки задать свойство display:block -чтобы она тоже стала блочным элементом.

Обновите информацию в вашем css

#frame1{
 margin-left:1270px;
 margin-top:600px;
 position: relative;
 display: block;} 

#frame1 img {
 display: block;
}

БЛОГ НА HUSL

Помогите решить проблему с отступом в css

Ответы (1 шт):