Custom CSS - Width of text rendered on Desktop Browser

[Yonz]

I would like to change the width of the rendered text (on desktop). Right now it's centered and uses only ca. 33% of the width. Yes, I have tried adding a custom CSS File. (assets/ananke/css/custom.css) And reference it in the param section of my hugo.yaml:

params:
  custom_css:
    - custom.css
  text_color: black

My Initial test was simple:

p {
    text-align: left;
  }

But nothing happens. So my question is: What (exactly) do I have to put in my custom.css file to a) let the text (article) use more of the screen, and b) Left Align the Body Text

Any help will be much appreciated!
Yonz

[Roshan Kumar]

Custom CSS Contribution

Purpose:
This custom CSS aims to address the issue where the rendered text width on desktop browsers
is not utilizing enough screen space. The following changes have been implemented:

1. Left-align the body text for better readability.
2. Remove constraints on the maximum width of the body content to allow it to use the full width.

Note:
It's important to test these changes thoroughly on different browsers and screen sizes to
ensure a consistent and visually appealing experience.

Author: Roshan Kumar
Date: 09 Jan 2024

Feel free to review and provide feedback. Thank you!

body {
    max-width: none; /* Removes the maximum width constraint */
}

article {
    max-width: 100%; /* Use the full width of the parent container */
    margin: 0 auto;  /* Center the content if needed */
}

p {
    text-align: left !important; /* Left-align the text */
}