Actually, two questions:
(1) Is there something in my code that would prevent <div class="rating"> from moving closer to the center? What can I add to actually move it closer to the center horizontally? (Side-note: CSS layout and positioning continue to be a mystery to me. I still don't understand when setting a margin or width will affect the position/layout and stop it from doing what I otherwise want it to do.)
(2) Why is <div class="title"> not within the viewport when the window isn't maximized? What can I do to fix this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Spartan', sans-serif;
font-size: 15px;
}
.container {
height: 100vh;
background-image: url('./images/bg-pattern-top-desktop.svg');
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
flex-direction: column;
width: 77%;
}
.top {
display: flex;
flex-direction: row;
}
.title {
color: hsl(300, 43%, 22%);
width: 25%;
margin: auto;
}
.stars {
display: inline;
margin-right: 30px;
}
.rating {
color: hsl(300, 43%, 22%);
font-weight: bold;
white-space: nowrap;
background-color: hsl(300, 24%, 96%);
padding: 15px 50px 15px 25px;
border-radius: .5em;
margin: 10px;
}
.bottom {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.comment {
background-color: hsl(300, 43%, 22%);
border-radius: .5em;
color: white;
padding: 25px;
margin: 15px;
}
.comment span {
color: hsl(333, 80%, 67%);
}
.comment p {
font-weight: lighter;
padding-top: 20px;
}
.author img {
border-radius: 50em;
}<body>
<div class="container">
<div class="content">
<div class="top">
<div class="title">
<h1>10,000+ of our users love our products.</h1>
<p>
We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.
</p>
</div>
<div class="spacer"></div>
<div class="ratings">
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in Reviews</span>
</div>
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in Report Guru</span>
</div>
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in BestTech</span>
</div>
</div>
</div>
<div class="bottom">
<div class="comment">
<div class="author">
<img src="images/image-colton.jpg" alt="colton" />
<div class="profile">
<div class="name">Colton Smith</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time.
Excellent!"
</p>
</div>
<div class="comment">
<div class="author">
<img src="images/image-irene.jpg" alt="irene" />
<div class="profile">
<div class="name">Irene Roberts</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."
</p>
</div>
<div class="comment">
<div class="author">
<img src="images/image-anne.jpg" alt="anne" />
<div class="profile">
<div class="name">Anne Wallace</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"
</p>
</div>
</div>
</div>
</div>
</div>
</body>Change height: 100vh to min-height: 100vh, this will give .container room to grow. At the moment, it's stuck to being 100vh which pushes its content outside its boundaries.
Also, you need to add justify-content: center to .top and remove margin: auto from .title to move the ratings further left:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Spartan', sans-serif;
font-size: 15px;
}
.container {
min-height: 100vh;
background-image: url('./images/bg-pattern-top-desktop.svg');
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
flex-direction: column;
width: 77%;
}
.top {
display: flex;
justify-content: center;
}
.title {
color: hsl(300, 43%, 22%);
width: 25%;
}
.stars {
display: inline;
margin-right: 30px;
}
.rating {
color: hsl(300, 43%, 22%);
font-weight: bold;
white-space: nowrap;
background-color: hsl(300, 24%, 96%);
padding: 15px 50px 15px 25px;
border-radius: .5em;
margin: 10px;
}
.bottom {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.comment {
background-color: hsl(300, 43%, 22%);
border-radius: .5em;
color: white;
padding: 25px;
margin: 15px;
}
.comment span {
color: hsl(333, 80%, 67%);
}
.comment p {
font-weight: lighter;
padding-top: 20px;
}
.author img {
border-radius: 50em;
}<body>
<div class="container">
<div class="content">
<div class="top">
<div class="title">
<h1>10,000+ of our users love our products.</h1>
<p>
We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.
</p>
</div>
<div class="spacer"></div>
<div class="ratings">
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in Reviews</span>
</div>
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in Report Guru</span>
</div>
<div class="rating">
<div class="stars">
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
<img src="images/icon-star.svg" alt="star" />
</div>
<span>Rated 5 Stars in BestTech</span>
</div>
</div>
</div>
<div class="bottom">
<div class="comment">
<div class="author">
<img src="images/image-colton.jpg" alt="colton" />
<div class="profile">
<div class="name">Colton Smith</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"
</p>
</div>
<div class="comment">
<div class="author">
<img src="images/image-irene.jpg" alt="irene" />
<div class="profile">
<div class="name">Irene Roberts</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."
</p>
</div>
<div class="comment">
<div class="author">
<img src="images/image-anne.jpg" alt="anne" />
<div class="profile">
<div class="name">Anne Wallace</div>
<span>Verified Buyer</span>
</div>
</div>
<p>
"Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"
</p>
</div>
</div>
</div>
</div>
</div>
</body>