Solution 1 :

Browsers add some margin to the <body> element by default, which is what’s causing that. You can remove it by adding this to your CSS code:

body {
  margin: 0;

Solution 2 :

You should always use margin:0 and padding:0, to all elements. You can use


This will prevent you from having predefined spaces in your code

Problem :

I am trying to get rid of the white spaces around the orange background color (top, right, and left). I was thinking of using position property to extend the height and width, but not sure if that’s a good idea. Sorry, I am kind of new to this.

html {
  box-sizing: border-box;

.profile-image {
  height: 8rem;
  width: 8rem;
  border-radius: 20rem;

.profile {
  text-align: center;
  padding-top: 2rem;

.background {
  background-color: orange;
<div class="background">
  <div class="profile">
      <img class="profile-image" src="" alt="profile photo">
      <h1 class="profile-name">John Johnson</h1>


Comment posted by do─čukan

body {margin:0;}


Leave a Reply

Your email address will not be published. Required fields are marked *