100DaysofCSS challenege(problem)

When I hover on one element other elements are also moving from their position which is odd,can someone tell how to rectify it

<div class="frame">
  <div class="center">
		<div id="boxes">
			<div><strong>15</strong> monday</div>
			<div><strong>16</strong> tuesday</div>
			<div><strong>17</strong> wednesday</div>
			<div><strong>18</strong> thursday</div>
		</div>
  </div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #48C9B0  ;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
	
  transform: translate(-50%,-50%);
}
#boxes{
	display:grid;
	display:relative;
	grid-gap:20px;
	justify-items:center;
	grid-template-columns:1fr 1fr;
}
#boxes div:nth-child(1){
	text-transform:capitalize;
	font-size:30px;
	padding:10px 20px;
	transition:0.4s;
	text-align:center;
	width:50%;
	
}
#boxes div:hover:nth-child(1){
	border:3px solid;
	box-shadow:inset 0 0 2px 2px;
	cursor:pointer;
}
#boxes div:nth-child(2){
	text-transform:capitalize;
	font-size:30px;
	transition:0.4s;
	padding:10px 20px;

	text-align:center;
}
#boxes div:hover:nth-child(2){
	border:3px solid;
	cursor:pointer;
	box-shadow:inset 0 0 2px 2px;
}
#boxes div:nth-child(3){
	text-transform:capitalize;
	font-size:30px;
	
	transition:0.4s;
	padding:10px 20px;
	text-align:center;
}
#boxes div:hover:nth-child(3){
	border:3px solid;
	cursor:pointer;
	box-shadow:inset 0 0 2px 2px;
}
#boxes div:nth-child(4){
	text-transform:capitalize;
	font-size:30px;

	transition:0.4s;
	padding:10px 20px;
	text-align:center;
}
#boxes div:hover:nth-child(4){
	border:3px solid;
	cursor:pointer;
	box-shadow:inset 0 0 2px 2px;
}

It’s because you’re adding border on hover.
You could add

#boxes div {
  border: 3px solid transparent;
}
1 Like

I did it but its still happening

No it’s not: https://codepen.io/jenovs/pen/dreMqQ