Basic QR Component Page

Hey Great work out there ! i just notice that you are using margin : auto and giving text-align : center in order to center the text element , i suggest that instead of giving each item a text-align and margin , since you are using display you can easily align it using align-items by adding it on .copy the p element will be align on center . that's all happy coding !!

you can now remove the text-align on each child since the .copy or the parent is have the text-align property.

.copy {
  max-width: 288px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto; // remove this 
  align-items: center; // add this
  text-align: center; // add this
}

h1 {
  font-size: 22px;
  font-weight: 700;
  text-align: center; // remove this 
  color: var(--dark-blue);
}

p {
  font-size: 15px;
  font-weight: 400;
  text-align: center; // remove this
  color: var(--grayish-blue);
}