Hello, I’ve been working on the Tea Cozy web design project and while all the elements are there, the style is not quite.
I’ve been working with flexbox throughout the whole project and I could not get the flex containers to expand to fit the screen. This meant I had to hard code in the dimensions of my screen to make the website look similar. For example, the fixed menu at the top has an extreme left margin to make the menu list go to the right of the screen.
I can only put in one picture, but
I will add more soon.
Thank you!
1 Like
Hello,
I am still learning and working on the same project but for me it seems that you are missing:
justify-content: space-between - for the menu flex container
and set width to 100%
1 Like
Thank you! That fixed the menu bar! Did you have any trouble centering the images as well?
I’ve made each item into its own container and tried to use flex on each. But it seemed to me that it didn’t need it? For example, the copyright had no css handling at all, yet it was perfectly centered. I did not understand how, but it did.
1 Like
Hi there,
I think if you declare the code below at the beginning, every inline element within you html will be centered. Somebody please correct me if I am wrong.
html, body {
text-align: center;
}
In addition, set your parent containers to display: inline-block will center them as well.
Alternatively just use margin: 0 auto for elements with width.
I hope this is useful.
