Problem
I used background-color but the page appeal to have a padding outside. I go google and they have charset and viewport codes (but I don’t really know it, should i just do copy and paste and use cheatsheet?)
My pen: https://codepen.io/CaptainHenry/pen/MWmgYxV
Thanks!
Within codepen click on the Settings button.
You will see a ‘Stuff for <head>’ box and at the bottom a button that says “insert the most common viewport meta tag”. Clicking that will add it for you.
You can read ore about what codepen does for you in their official documentation.
1 Like
Hi!
The meta tag is used to provide additional information about to your website to the browser. This information can be something like the name of the author of the webpage or the character set that is used. All that extra stuff ie anything other than the website url and name, when you search for a website on google is added via the meta tag. for example.
the line beneath the website name in this case is being added by a meta tag with the name of description.
if you wanna learn more about this i suggest you look into
to answer your particular question.
This particular meta tag is setting the initial scale value of a website for mobile phones so your website can rendered properly on small screen sizes. as far as i am concerned there is a particular problem in iphones due to which this is needed.
You can add it if you want but you do not need to as most modern text editors like vs code or atom adds it by default if you use the boiler plate code.
Hope this helped! 
1 Like
Thanks a lot! These are what i need!
But I still don’t know why my navigation bar have space around it? Please help thanks!
I tried margin:0;
Thanks a lot! But can you help me with my nav bar. It got empty space outside it and I don’t know how to fix! Thanks.
sure! let me know about the problem you’re facing as well as a link to your codepen
1 Like
Thanks! Here’s my link https://codepen.io/CaptainHenry/pen/MWmgYxV
(It happen the same to my other pens too)
Edit: I somehow made to outside no space but now all my items are only at the corner, and I can’t make logo on left side and li on the other side!
Well, in the example you sent me the problem seems to be with the img as well as the way you set up the flexbox container.
You are setting the image’s position property to absolute which is taking it out of normal flow and making it seem like there are no elements except the ul tag so space-between would not work on it.
The next thing is to set the display : flex on the nav element instead of the header element because the img tag and the list are the direct children of nav and the flex blox can only layout the direct children.
and the last thing that you should be using to space out the children is the justify-content property. the justify-items property only works in grid.
if you want to practice your flexbox skills then i would recommend doing it via playing games. here are some of my favorite.
https://mastery.games/flexboxzombies/
Hope this helped. 
1 Like
Thanks a lot! You saved my day!
hahaha don’t worry about it! let me know if you need help with anything else.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.