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.
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.
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
click on Analyse HTML it will generate a report
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.