Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've worked with CSS and HTML, so I'm feeling pretty rusty.

I've managed to get 90% of the way there, but I can't quite figure out how to align elements left within centered rows. Any suggestions? I've scoured stack overflow for solutions, but nothing seems to solve this issue. Should I ditch DIVs and start from scratch?

If you have any insights, here's a snippet of the HTML and CSS:

<html>
            <head>
                <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />
                <style>
                    @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
                    body {
                        background: #EEE;
                        font-family: "Roboto", helvetica, arial, sans-serif;
                        font-weight: 100;
                        text-rendering: optimizeLegibility;
                        text-align: center;
                        margin: 0;
                        padding: 0;
                    }

                    .page-header {
                        position: fixed;
                        display: table;
                        background-color: #1b1e24;
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 5em;
                        width: 100%;
                        z-index: 100;
                        color: #D5DDE5;
                    }
                    /* More CSS styles... */
                </style>
            </head>
            <body>
              <div class="page-header">
                  <div class="header-content">Tracking Shows</div>
              </div>
              <div class="shows-container">
                    <div class="show-container">
                        <!-- Show details here -->
                    </div>
                    <!-- More show containers -->
               </div>
           </body>
        </html>

Answer №1

Wrap your "show-container"s on a second div and apply left alignment to it.

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

Tablet displaying incomplete background image

I am facing an issue with my background image only showing inside the content blocks, as you can see in the screenshot. I have a small fadeIn animation for the content, but nothing else special. Here is the CSS code I am using: .template_home { backgro ...

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

What is the best way to ensure the second navbar stays at the top when scrolling, after the first one?

Looking for a solution to create a navbar with two distinct sections for contact info and the menu. The goal is to have the contact info disappear when scrolling down, while the menu remains fixed at the top of the page. When scrolling back up, the menu sh ...

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

When is it appropriate to utilize props and CSS in customizing Material UI components?

As a beginner with Material UI, I'm curious about when to use props within the .jsx script and when to utilize CSS in a separate stylesheet to style MUI elements. Is it necessary to still incorporate CSS stylesheets for MUI elements or is it preferabl ...

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

What steps can I take to ensure my website maintains a consistent appearance across various internet browsers?

I'm fairly new to web development; my knowledge is limited to CSS and HTML, just enough to make a website look good. I would appreciate it if you could explain things in simple terms. I've been researching how to ensure that a website looks the ...

Selenium Alert: Inaccessible Element Encounter (cookie and other pop-up)

I'm attempting to click a button using Selenium so that I can inspect the full HTML of a website. Here's the code I've written: driver = webdriver.Chrome() driver.get('https://www.quattroruote.it/listino/audi/a4-allroad') time.slee ...

Tips for transferring input field values through the href attribute in HTML?

How can I pass an integer value from a link to an input field's value? Imagine example.com is a webpage with one input field. I would like to achieve something like this: Click here 1 Click here 2 If the user clicks on click here 1, then ...

Set YouTube Playlist to start from a random index when embedded

I've been trying to figure out how to set my embedded playlist to start with a random video. Here's what I attempted: <iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(ran ...

When I try to upload an image onto my website, the layout of my text gets disrupted

There seems to be quite a gap between the welcoming message and the main body text. Significant spacing noticed between Title and body ...

Adjust the transparency level of the image's mapped area

I need help with changing the opacity of a specific area on an image map when clicked. The image has three areas, but I only want to target and change the opacity of the test2 area regardless of which area is clicked. Since my knowledge of jQuery syntax is ...

Deactivating all HTML DOM elements except for those with a specific #id

Currently, my goal is to deactivate all elements on an html page while keeping certain elements active. $('body').find('*').attr('onclick',"return false;"); //Deactivating all elements // I am attempting to activate the eleme ...

What is the best method to locate a particular item using XPATH in case of duplicate values?

I'm facing an issue where two products are priced the same at 499 RS, but my code is consistently selecting the first product instead of the second one. How can I ensure that it selects the correct duplicate item in this scenario? ...

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

Create an HTML document with a text element that has a bottom

I need to emphasize specific text that requires underlining. <div><span class="text">Underlined</span><br>blah blah</div> As a result, the content should be displayed as follows: Underlined --- blah blah In my SASS/SCS ...

What is the best way to maintain an input String when refreshing a page using Selenium Webdriver?

When using Selenium webdriver, I am facing an issue where the value in an input element is not retained after refreshing the page. Interestingly, when testing manually, the scenario works as expected. Is there a way to ensure that the input string remain ...

Whenever I attempt to update content in my database using an HTML form, I encounter an issue where if I enter a single quote character in the input field, the SQL update operation fails

Whenever I fill out a basic form and include an apostrophe or single quote, the query breaks and the data is not added to my database. How can I prevent this issue? Form Example <form method="POST" action="#"> <table> < ...

Guide to setting a default value for a select option in Angular 2+

I am having trouble setting a default option in my select box using the html selected property. I want the selected option to be assigned to StartingYear, but currently it's not working as expected. <select [(ngModel)]="StartingYear"> < ...

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...