Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Just wondering, could there be something in my code that's preventing 

<div class="rating">
from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzzle me. I struggle to understand when setting margins or widths will impact the position/layout and prevent it from behaving as desired.)

(2) Also, why isn't 

<div class="title">
within the viewport when the window isn't maximized? Any suggestions on how 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>

htmlcssmedia-queries

Answer №1

To ensure that .container has room to grow, change height: 100vh to min-height: 100vh. Currently, with a fixed height of 100vh, the content overflows.

Additionally, add justify-content: center to .top and remove margin: auto from .title to shift 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem uploading images to server and database

I'm currently experiencing difficulties with photo uploads on my website. The issue arises at the $fileName = basename($_FILES["file"]["name"]); line where I receive the error message "Please select a file to upload". There seems to be no database in ...

phphtmlmysqlupload

PHP code for uploading multiple images at once

I am currently facing an issue with uploading multiple files at once and not getting the desired result. Below is my code snippet: <?php if (isset($_FILES['uploadfiles'])) { print_r($_FILES); } ?> <form action="index.php" method="po ...

phphtmlimage

How can I make the menu appear only on a certain page in a React application, instead of showing on every page?

Currently, I am in the process of learning React and developing an admin panel. My main challenge is to display the menu only on specific inner pages such as dashboard, list, or add, rather than displaying it on every page including the login page. Is the ...

htmlreactjsreact-router

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

javascriptphphtmlvue.jsvue-component

The Google font feature is causing an issue where text cannot be selected when trying to print a

I am in the process of creating a Vue application to generate my CV in PDF format. I have incorporated the Google font Montserrat into the project, but when I attempt to print the page to file (CTRL + P in Firefox), the text appears as if it were an image ...

cssvue.jsgoogle-font-api

Compiling and rendering HTML code from a file with AngularJS

Here is the custom directive code that I have created: angular.module('app.directives', []).directive('userHeader', ['authService', '$compile', function(authService, $compile) { return { restrict: 'AEC&ap ...

javascripthtmlangularjs

The colgroup tag is present in the code, but strangely absent from the view source or debugger tool

In a curious twist from this question Why does Firebug add <tbody> to <table>?, I have encountered a similar issue that may lead to the same answer, but I am seeking confirmation. Within my code, there is a colgroup element that mysteriously d ...

c#htmlhtml-tablecolgroup

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

javascriptcssbootstrap-4aurelia

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: I am not certain if this layout is achievable with flexbo ...

cssflexbox

Storing a selected database column as a variable from an HTML page in Node.js with Express

My website showcases flight information pulled from a MySQL database. The process begins with a form where users select destinations and dates for their desired flight. Once the form is submitted, users are directed to another page where flights matching t ...

javascripthtmlmysqlnode.jsexpress

Interacting with various cookies created from user-provided input (specifically from textboxes) simultaneously

I'm facing a challenging problem and I'm in need of some assistance. The task at hand is to create three text boxes for users to input values for cookies named: name, city, and hobby. Then, using a single button with an onclick event, a function ...

javascripthtmlcookies

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

htmlcsstwitter-bootstrap

PHP code failing to save form information into database

I am experiencing difficulties with inserting form data into my database. The connection to the database is successfully established without any errors, but no information is being entered. Below is my code - any assistance would be greatly appreciated. ...

phphtmlmysqlsqlphpmyadmin

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

htmlhtml-tableresponsive

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

I am currently utilizing CSS grid to create the layout for my web application. I need to specify that a particular class should have a minimum grid-column span of 3 frames and extend across the entire grid row if it is the only object in that specific row. ...

htmlcsscss-grid

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Is it feasible to utilize HTML files to fetch information from a MYSQL database by utilizing PHP on the server?

I am trying to set up a form in an HTML file called index.html that includes some AJAX code linking to PHP for MySQL database connectivity. The idea is for clients to be able to insert, delete, and edit data in the database by filling out the form on index ...

phphtmlajaxdatabasemysqli

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Is it possible to utilize the FLOT Javascript library for creating a chart with dual axis and three data sets? I am specifically looking to have one data set on the left axis and two on the right axis. Ideally, I want to stack the two datasets on the right ...

javascripthtmlchartsflot

The grouping functionality of the Material UI Buttongroup seems to be failing to properly

Working on a review score list currently, where I've set up a RadioGroup with RadioButtons. However, the issue is that the RadioButtons are not aligning properly with the RadioGroup. The goal is to have the radiobuttons styled similarly to the exampl ...

htmlreactjsradio-buttonmaterial-ui

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss