Div/Span Misalignment on Big Screens

[Snowfall]

Hello everyone,

This is my first post; thank you for hosting this forum, allowing a platform for the growth of skill and understanding.
I hope I may ask a question about an issue that I fail myself to resolve; I'm not entirely new to HTML/CSS, and yet should still be considered a neophyte. I hope your more seasoned eyes will be able to detect my error and help me out.

I'm trying to create a simple one-page website, displaying some philosophical texts I have written. The mock-layout I will refer to in this post does not display any actual content, publications or active links, not wishing to unintendedly spam my humble sophist ramblings ;-).
The setup is this: There is a span (class publications) that holds the centered-text "Publications."
Below that is a span (class booktitle), holding the left-aligned title of a publication.
Below that is a parent-div (class divContainer )that contains two child-divs.
One child-div (class bookDescription) holds the description of a publication. The second child-div (class bookImage) holds an image of the cover of a publication.
The media query @media screen and (min-width: 768px) ensures the the book titles are aligned left on a laptop/PC, with the book description and book cover aligned next to one-another. When the screen is smaller that 786px, the book titles, the book description, and the book cover are all aligned centered; with the book description and book cover being placed below one-another.

All of this works fine on my laptop, and using Brave-inspect everything tested well for mobile devices. However, having used the library computer, having a rather large monitor, I saw that the span holding the book titles is aligned too much to the left relative to the divs below them. I could not understand what I was doing wrong, and must be lost in the rather vast diversity of CSS solutions and modes of formatting. Or my brain failed to understand some obvious percentages/numeral values. Edit: I just found out my issue has to do with the Windows display settings. Under "Scale and Layout" it is apparently a standard that the scale is set to 125%. On 125%, my layout works fine;  but when the scale is set to 100%, I get the aforementioned issue of the book titles aligning too much to the left relative to the div container, and the two child-divs.

This is the HTML-file; this the CSS.
How the layout appears on a small screen: image.
How the layout is intended on a big screen: image, and how it is indeed displayed on my laptop.
How the layout appears on the large monitors of my library: image.

CSS-class publications (not altered after/within @media screen and (min-width: 768px)):

.publications{font-size: 23px; display: block; margin: auto; width: 50%; text-align: center;}

 

CSS-class divContainer before @media screen and (min-width: 768px):

.divContainer{
/*border-style: solid;
border-color: black;*/
border-width: 5px;
width: 90%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

 

CSS-class divContainer after/within @media screen and (min-width: 768px):

.divContainer{
flex-wrap: nowrap; width: 60%;}

Flex-wrap: wrap has been set to nowrap; width has been changed from 90% to 60%.
 

CSS-class bookDescription before @media screen and (min-width: 768px):

.bookDescription{
margin: 5px;
/*border-style: dashed;
border-color: darkgrey;*/
display: block;
width: 90%;
margin-bottom: 30px;
}

CSS-class bookDescription after/within @media screen and (min-width: 768px): 

.bookDescription{width: 60%;}

Width has been changed from 90% to 60%.

 

CSS-class bookImage  before @media screen and (min-width: 768px):

.bookImage{
/*border-style: dashed;
border-color: darkgrey;*/
margin: 5px;
display: flex;
max-width: 201px;
text-align: center;
justify-content: center;
}

CSS-class bookImage  after/within @media screen and (min-width: 768px):

.bookImage{
justify-content: left;
float: left;}

Justify-content has been changed from center to left. A float: left has been added.

 

I would be most grateful for your help!

Snowfall

Edited November 6, 2022 by Snowfall

[administrator]

Couple of broad suggestions:

Study the box model a little more. My book Web Design Start Here, breaks that down. Or just rebuild it using CSS Grid and Flexbox ... which are much easier to work with.

Stef

[Snowfall]

18 minutes ago, administrator said:

Couple of broad suggestions:

Study the box model a little more. My book Web Design Start Here, breaks that down. Or just rebuild it using CSS Grid and Flexbox ... which are much easier to work with.

Stef

Thank you for your good advice; I'll have a look at your publication.
I managed to resolve the issue; suddenly the div did allow me to use a header tag, whereas before it failed to parse a new line. This caused the header tag within the div to sort of form a block, aligned to the left, and the other content of the div to be pushed to the right, in another block. This forced me to clumsily use a span tag above my div in order to hold a book's title.

Strangely enough, the p-tag continues to not work properly within my divs. It functions as if it is a <br />. Any idea as to why that is? Does it have to do with a div's display settings?

 

Kindly,

Snowfall

Edited November 7, 2022 by Snowfall

[administrator]

On 11/7/2022 at 10:32 AM, Snowfall said:

the p-tag continues to not work properly within my divs. It functions as if it is a <br />.

That is expected. The default formatting in a p tag is to insert a line break. That, among many other details are taught in my book and my courses:

https://school.studioweb.com/store/#courses

Stef