I think your page looks good. One thing I noticed was the color for the link at the bottom is white. It doesn’t seem super obvious that the user should click on it so maybe change the color to blue since that is the standard color for links.
Overall this is a solid effort. The space on the sides is not necessarily an issue. You don’t want your text content to get too wide because then it becomes harder to read. So if you put a max-width on your content then there will be space on the sides as the view port gets wider and that’s OK. But if you narrow your browser as far as it will go you will notice that your content gets pretty skinny yet there is still space on the sides that could be used to allow the content to be wider. So for narrow view ports I think you need to get rid of most of that space.
The way to do this is to use a narrow-first approach when styling your page. Make your browser as skinny as possible and style it so it looks good. You can leave a little space on the sides, you don’t want the content going right up to the edge of the browser, but you should definitely allow the content to fill most of the horizontal space. This will be your default CSS.
Then you can gradually widen your browser and make adjustments to the CSS as needed for wider view ports. I think you might have over-engineered this page just a little using flexbox/grid. A page like this with a very simple content layout does not need either of those. If you want to use them just for the sake of learning then fine, but sometimes simplicity is best and you can definitely make this page look exactly like it is now without them.
Tried line-height but it does not look good when a line wraps into two, meaning it gives an equal distance to every line within the ul element. On the other hand, margin-bottom keeps the line-height within every li element the same but creates a space between the li elements.
Just in case here is an example (I want red, not blue):
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#line-height li{
line-height: 6em;
color: darkblue;
}
#bottom-margin li{
margin-bottom: 6em;
color: red;
}
</style>
<title> Just a page</title>
</head>
<body>
The content of the body element is displayed in your browser.
<ul id="line-height">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
</ul>
<ul id="bottom-margin">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Pretium quam vulputate dignissim suspendisse in est ante. Semper quis lectus nulla at volutpat diam ut venenatis. Convallis tellus id interdum velit laoreet id donec ultrices. Egestas integer eget aliquet nibh praesent tristique. In nisl nisi scelerisque eu ultrices vitae auctor eu. Feugiat in ante metus dictum at tempor commodo ullamcorper. Aliquam etiam erat velit scelerisque in. Porta non pulvinar neque laoreet suspendisse.</li>
</ul>
</body>
</html>
Oh no, sorry for the confusion. I meant the type of spacing I wanted is like the one on red. line-height makes it hard to read the timeline in small screens where a sentence occupies multiple lines. So, I used margin-bottom as a substitute of <br>.
My original goal was to add an additional space between every li element, in other words, larger space between a full sentence, not between lines.
The space I wanted to make bigger was the area where the blue lines are. That’s why I used margin-bottom instead of line-height because line height would space every line* evenly which is not what I was trying to achieve.
Yet again, sorry for the confusion, sometimes I forget line and sentence are two different things haha.