Как удалить пробел из-за позиции относительно CSS?

---

Привет! Я хотел создать веб-сайт, который будет отображать изображение продукта слева и спецификации или функции справа. Я пробовал использовать position relative, и он делает свою работу.Но единственная проблема в том, что когда я сдвинул его рядом с изображением, там, откуда он появился, появилось большое белое пустое пространство, и я не знаю, как его удалить. Пожалуйста, поделитесь своими знаниями об этом и не стесняйтесь предлагать новые методы для улучшения моего сценария.

Ниже я предоставил небольшой скрипт, похожий на веб-сайт, который я пытаюсь создать для более легкого анализа.

Что я уже пробовал:

Here is the code for main.html:

<pre lang="HTML">&lt;html>
	&lt;head>
		&lt;title>TEST&lt;/title>
		<link rel="stylesheet" href="styles.css" />
	&lt;/head>
	
	&lt;body>
		<div id="wrapper">
             <div id="imageStyle">
                <img src="Music Store/img/Ibanez Guitars/ibanezM8MStandingPosition.png" />
             </div>

             <div id="featuresStyle">
                 <h2>Name: Ibanez M8M</h2>
                 <br/>
                 <h2>Price: $30000</h2>
                 <br/>
                 <h2>Description: Good Guitar!</h2>
                 <br/>
                 <h2>Neck Type: Bla Bla Bla</h2>
                 <br/>
				 <h2>Body: Bla Bla Bla</h2>
                 <br/>
                 <h2>Fretboard: Bla Bla Bla</h2>
                 <br/>
                 <h2>Bridge: Bla Bla Bla</h2>
                 <br/>
                 <h2>Neck Pickup: Bla Bla Bla</h2>
                 <br/>
                 <h2>Bridge Pickup: Bla Bla Bla</h2>
                 <br/>
                 <h2>Hardware Color: Bla Bla Bla</h2>
                 <br/>
		     </div>
        </div>
	&lt;/body>

&lt;/html></pre>


and here is the styles.css:

<pre lang="CSS">#wrapper
{
   border: 1px solid black;
   width: 65%;
}

#imageStyle 
{
    margin-left: 60px;
}

#featuresStyle 
{
    position: relative;
    left: 480px;
    bottom: 870px;
}</pre>

---