Problem

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>maintenance LLC</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="header">
		<div class="logo">Test</div>
		<div class="main-text">Web Page:</div>
		<div class="catalog">
			<div id='canvas'></div>
			<div id='canvas'></div>
			<div id='canvas'></div>
		</div>
	</div>

</body>
<script type='module' src='main.js'></script>
</html>

CSS

/* Style the header with a grey background and some padding */
body {
  background-color: white;
}

#canvas {
    background-color: #000;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 150px;
    position: static; /* fixed or static */
    top: 100px;
    left: 100px;
}

.header {
  overflow: hidden;
  padding-top: 50px;
  padding-right: 155px;
  padding-left: 155px;
}

.logo {
  color: #A12A2A;
  font-size: 89px;
  font-family: Montserrat medium;
}


.catalog {
  padding-top: 75px;
  display: flex;
  justify-content: space-between;
}

.item {
  padding: 275px;
  border: solid 5px black;
}

.main-text {
  color: #A12A2A;
  font-size: 75px;
  font-family: Montserrat;
  font-weight: 600;
  padding-top: 55px;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/pin/three@v0.128.0-iDyvDZdRCoyR9DXa2rWg/mode=imports,min/optimized/three.js';


const container = document.getElementById("canvas");
// const selected = document.querySelector("#canvas");
// document.body.appendChild(container);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( container.offsetWidth, container.offsetWidth );

// renderer.setSize( item.clientWidth, item.clientHeight );

container.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const animate = function () {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};

animate();