Web layout (horizontal/column layout)

I am trying to create a horizontal (rectangular) layout for each of the section on my webpage. Each rectangular–column section of the 1 page site has a background color. Basically the webpage layout resembles an horizontal grid-column layout.

My question is this? How can I stretch the width of each section of the page so that fits the entire window. Secondly can this be accomplished using GRID (column), or flex-column.

Not sure if I understand your question 100% but can you take this approach in CSS grid?

grid-template-columns: repeat(5, 100vw);

I am trying to stretch the width of the foreground to fit the width of window/background, just the width. I am using the flex column as a layout. The each column as to stretch to fit the entire width.

Can you show some code or a picture of what it is you want to achieve?

Do you want a side-scrolling layout where each section takes up the full width and you have scroll to the right to get to each new section?

Maybe re-visiting this lesson will help.

Here is the link

I am trying to make the column width fit into the width of the background/window

Here is the link:

I am trying to have the column for each section fit into the window screen width

you have invalid html tags, divisions which are not closed
until that is fixed you are going to have a very hard time getting anything to do what you want
codepen will show you what is wrong image
click on Analyse HTML it will generate a report

lol, I know, I can see whats wrong with it. thats why I am asking for help.
thanks anyways

On line 11

<conent id = "container">

conent is not a valid html tag, you have defined rules for that class but they are not being applied to anything. change that to a div and make sure to put the closing tag in the proper place.
lines 4 -7

<a href = #welcome-section><li>About</li></a>

instead do this

<li><a href = "#welcome-section"> About </a></li>

on line 28 you have a div that got started but never finished

the final issue is that you are using the id of portfolio-link for more than one element.

these bits of wrong code will throw everything else off.

I’m still not really sure what you are asking, but if you want the sections to go full width you have to remove the default margin on the body.

body {
  margin: 0;

I figured it out. thanks

Thanks, already did that