I think you don't need the position:absolute
you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
Question
I have a page set up however I am having trouble aligning the news articles to the center of the page.
Here is a link to what I have so far -
Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?
The red container has the css of position:absolute
Any help would be hugely appreciated.
PS. this is only my first week of learning css and html so please forgive me if it is something simple.
Thanks
La solution
I think you don't need the position:absolute
you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
Autres conseils
There's a lot that can be impoved, but going to your question, I'd do something like this:
.collection {
position: static;
display: inline-block;
}
.roundcont {
text-align: center;
}
You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.