Help with whitespace between divs

HTML-CSS
1

Hey everyone, my first post on here and this is probably a massive rookie mistake that i’m overthinking, but I can’t figure out why i have this massive whitespace at the start of my second line…can anyone help me? Also this is my first time ever asking for help with my coding so I hope I did this right.

Here’s what it looks like:

colors
colors936×437 86.6 KB

And here’s the code:

<!DOCTYPE html>
<html>
	<head>
		<title>Colors!</title>

	<style>

		

		#shadow{
			box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		    border-radius: 50%;
		}

		.circle {
			text-align: center;
			height: 200px;
			width: 200px;
			border-radius: 50%;
			margin: 0 10px 10px 0;
			
		}

		p {
			padding-top: 60px;
		}

		.black {
			background-color: #000000;
			color: #FFFFFF;
			float: left;
		}

		.gray {
			background-color: #808080;
			float: left;
			
		}

		.white {
			background-color: #ffffff;
			color: #000000;
			float: left;
			border: 1px black solid;
		}

		.red {
			background-color: #FF0000;
			float: left;
		}

		.purple {
			background-color: #800080;
			float: left;
		}

		.pink {
			background-color: #FFC0CB;
			float: left;
			
		}

		.orange {
			background-color: #FFA500;
			float: left;
		}

		.yellow {
			background-color: #FFFF00;
			float: left;
		}

		.green {
			background-color: #008000;
			float: left;
		}

		.blue {
			background-color: #0000FF;
			float: left;
		}

		
	</style>	

	</head>
	<body>
		<h2>Choose a color!</h2>

		<div id="shadow" class="circle black">
			<p>Black<br>
			   #FFFFFF<br>
			   rgb(0, 0, 0)
			</p>
		</div>

		<div id="shadow" class="circle gray">
			<p>Gray<br>
			   #808080<br>
			   rgb(128, 128, 128)
			</p>
		</div>

		<div id="shadow" class="circle white">
			<p>White<br>
			   #FFFFFF<br>
			   rgb(255, 255, 255)
			</p>
		</div>

		<div id="shadow" class="circle red">
			<p>Red<br>
			   #FF0000<br>
			   rgb(255, 0, 0)
			</p>
		</div>

		<div id="shadow" class="circle purple">
			<p>Purple<br>
			   #800080<br>
			   rgb(300, 100%, 25%)
			</p>
		</div>

		<div id="shadow" class="circle pink">
			<p>Pink<br>
			   #FFC0CB<br>
			   rgb(350, 100%, 88%)
			</p>
		</div>

		<div id="shadow" class="circle orange">
			<p>Orange<br>
			   #FFA500<br>
			   rgb(255, 165, 0)
			</p>
		</div>

		<div id="shadow" class="circle yellow">
			<p>Yellow<br>
			   #FFFF00<br>
			   rgb(255, 255, 0)
			</p>
		</div>

		<div id="shadow" class="circle green">
			<p>Green<br>
			   #008000<br>
			   rgb(0, 128, 0)
			</p>
		</div>

		<div id="shadow" class="circle blue">
			<p>Blue<br>
			   #0000FF<br>
			   rgb(0, 0, 255)
			</p>
		</div>
	

	</body>
</html>
2

I bet it has to do with the float: left; on all the circles - I would try removing those, and probably add the display: inline-block; property

side note: the id attribute is supposed to be unique

3 Likes
3

Yeah just change the ‘float: left’ to ‘display: inline-block’ and it will work fine :smiley:

04
042348×1034 404 KB

<!DOCTYPE html>
<html>
	<head>
		<title>Colors!</title>

	<style>

		

		#shadow{
			box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		    border-radius: 50%;
		}

		.circle {
			text-align: center;
			height: 200px;
			width: 200px;
			border-radius: 50%;
			margin: 0 10px 10px 0;
		}

		p {
			padding-top: 60px;
		}

		.black {
			background-color: #000000;
			color: #FFFFFF;
			display: inline-block;
		}

		.gray {
			background-color: #808080;
			display: inline-block;
			
		}

		.white {
			background-color: #ffffff;
			color: #000000;
			display: inline-block;
			border: 1px black solid;
		}

		.red {
			background-color: #FF0000;
			display: inline-block;
		}

		.purple {
			background-color: #800080;
			display: inline-block;
		}

		.pink {
			background-color: #FFC0CB;
			display: inline-block;
		}

		.orange {
			background-color: #FFA500;
			display: inline-block;
		}

		.yellow {
			background-color: #FFFF00;
			display: inline-block;
		}

		.green {
			background-color: #008000;
			display: inline-block;
		}

		.blue {
			background-color: #0000FF;
			display: inline-block;
		}

		
	</style>	

	</head>
	<body>
		<h2>Choose a color!</h2>

		<div id="shadow" class="circle black">
			<p>Black<br>
			   #FFFFFF<br>
			   rgb(0, 0, 0)
			</p>
		</div>

		<div id="shadow" class="circle gray">
			<p>Gray<br>
			   #808080<br>
			   rgb(128, 128, 128)
			</p>
		</div>

		<div id="shadow" class="circle white">
			<p>White<br>
			   #FFFFFF<br>
			   rgb(255, 255, 255)
			</p>
		</div>

		<div id="shadow" class="circle red">
			<p>Red<br>
			   #FF0000<br>
			   rgb(255, 0, 0)
			</p>
		</div>

		<div id="shadow" class="circle purple">
			<p>Purple<br>
			   #800080<br>
			   rgb(300, 100%, 25%)
			</p>
		</div>

		<div id="shadow" class="circle pink">
			<p>Pink<br>
			   #FFC0CB<br>
			   rgb(350, 100%, 88%)
			</p>
		</div>

		<div id="shadow" class="circle orange">
			<p>Orange<br>
			   #FFA500<br>
			   rgb(255, 165, 0)
			</p>
		</div>

		<div id="shadow" class="circle yellow">
			<p>Yellow<br>
			   #FFFF00<br>
			   rgb(255, 255, 0)
			</p>
		</div>

		<div id="shadow" class="circle green">
			<p>Green<br>
			   #008000<br>
			   rgb(0, 128, 0)
			</p>
		</div>

		<div id="shadow" class="circle blue">
			<p>Blue<br>
			   #0000FF<br>
			   rgb(0, 0, 255)
			</p>
		</div>
	

	</body>
</html>
1 Like
4

Thank you for the response, and for pointing out the id that I messed up on,I really appreciate it!

5

Thanks for helping me out and posting the corrected code for me to show me how it should look, helped me out a lot, still trying to learn everything and get it all down.