ThreeBlackBird:
Bosses, I have tried so much in the past two days to know why my navlist overflows out of the border when I try to reduce the width of the browser but to no avail. I have wrapped it a container that has an 80% width. Kindly help me review. This has stopped the site from being responsive.

My codepen
https://codepen.io/LarryKing/pen/GRoOOyr

CC: Timi1212, incogni2o

Your CSS property is obviously the problem

.navbar li {
    padding: 30px;
    font-size:25px;
}

---

If this code is interpreted well it means you are adding about 60px padding for an element horizontally and 60px padding vertically. Also 30px seem to be very large padding for navigation space but next time you need to pad element ensure you do it properly.

padding: 30px

This is a short hand form or equivalent to

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

---

The ordering is very important, top-right-bottom-left. Another way of writing it is this;

padding: 30px 30px 30px 30px;

---

and lastly the final way is

padding: 30px;

---

The last line was the exact problem in your code which made your nav overstretched from the screen. To get it back if you must still use your 30px here are your solution.

.navbar li {
    padding-left: 30px;
    font-size:25px;
}

or

.navbar li {
    padding: 0 0 0 30px;
    font-size:25px;
}

when using 0(zero) don't add a scale to it.

The idea behind the solution is just to specify a padding left which is just enough to separate the navs rather than in all directions.

---

On a lite not you're better off using margins rather than padding. Margins are for that exact purpose, padding is for making an element rise and swell to cover up it surrounding space and it makes sense when coloring website so as to fill blank spaces. so here could be another solution.

.navbar li {
    margin: 0 0 0 30px;
    font-size: 25px;
}

I like to get a feedback.

stanliwise:

Your CSS property is obviously the problem

.navbar li {
    padding: 30px;
    font-size:25px;
}

If this code is interpreted well it means you are adding about 60px padding for an element horizontally and 60px padding vertically. Also 25px seem to be very large padding for navigation space but next time you need to pad element ensure you do it properly.

padding: 30px

if is a short hand form or equivalent to

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

The ordering is very important, top-right-bottom-left. Another way of writing it is this;

padding: 30px 30px 30px 30px;

and lastly the final way is

padding: 30px;

The last line was the exact problem in your code which made your nav overstretched from the screen. To get it back if you must still use your 30px here are your solution.

.navbar li {
    padding-left: 30px;
    font-size:25px;
}

or

.navbar li {
    padding: 0 0 0 30px;
    font-size:25px;
}

when using 0(zero) don't add a scale to it.

I like to get a feedback.

Man of wisdom, i have tears in my eyes right now. Thanks a whole lot, i am very grateful. I first removed the padding entirely and realized it fits perfectly into the borders. When i tried padding the left, the right went out a bit. I have reduced the size and it fits perfectly now. Please, what is the perfect font-size for mobile and desktop, sir?


The biggest problem i'm having now is not having a mentor to guide me through. Please sir, advise me on this sir.


Your analysis is very comprehensive and in depth. Thanks.

ThreeBlackBird:


Man of wisdom, i have tears in my eyes right now. Thanks a whole lot, i am very grateful. I first removed the padding entirely and realized it fits perfectly into the borders. When i tried padding the left, the right went out a bit. I have reduced the size and it fits perfectly now. Please, what is the perfect font-size for mobile and desktop, sir?


The biggest problem i'm having now is not having a mentor to guide me through. Please sir, advise me on this sir.


Your analysis is very comprehensive and in depth. Thanks.

I have updated my mention, I was trying to refer to the padding that

30px;

seem too large and not the font-size per say.
Obviously there is nothing wrong with your sense of style and size you pick. Users make use of several browsers but when developing as a frontend coder. Make use of what we call "Development tool". in Mozilla you can summon it ctrl+Alt+k and in chrome I think ctrl + Alt +k. It has a tool for switching between desktop and mobile. if it looks good from your perspective then stick with it. Please watch a complete guide on YouTube on how to use Developer tools on browser. You will profit alot from it. I discovered your problem by just checking the CSS property of the nav after and highlight and I saw the borders where extremely large, on close look I tried to reduce it but to no avail then I discovered it sub-element were the cause of it large borders. So learn how to use tool to analyse your own CSS.

Also to understand CSS properly, as much as you code and find details online, you need to take time and sit down with a good and complete CSS guide. I mean a book that has indepth details about how CSS works. Read both the seemly important and unimportant part in any order you like. It will help you in distant future. Lastly, Study frontend frame works one at a time, You may need to consider bootstrap and jquery. They make a good read.

I do mentor people though but only on backend programming. Not frontend.

stanliwise:


I have updated my mention, I was trying to refer to the padding that [code]30px;[code] seem too large and not the font-size per say.
Obviously there is nothing wrong with your sense of style and size you pick. Users make use of several browsers but when developing as a frontend coder. Make use of what we call "Development tool". in Mozilla you can summon it ctrl+Alt+k and in chrome I think ctrl + Alt +k. It has a tool for switching between desktop and mobile. if it looks good from your perspective then stick with it. Please watch a complete guide on YouTube on how to use Developer tools on browser. You will profit alot from it. I discovered your problem by just checking the CSS property of the nav after and highlight and I saw the borders where extremely large, on close look I tried to reduce it but to no avail then I discovered it sub-element were the cause of it large borders. So learn how to use tool to analyse your own CSS.

Also to understand CSS properly, as much as you code and find details online, you need to take time and sit down with a good and complete CSS guide. I mean a book that has indepth details about how CSS works. Read both the seemly important and unimportant part in any order you like. It will help you in distant future.

I do mentor people though but only on backend programming. Not frontend.

I saw the update and I've implemented it. Although, I have been using developer tool on Google for Javascript, I will download the video and learn much more.

I added the border because I wanted to know what was going on in the box.

Thanks a lot, I was already losing hope.

ThreeBlackBird:


I saw the update and I've implemented it. Although, I have been using developer tool on Google for Javascript, I will download the video and learn much more.

I added the border because I wanted to know what was going on in the box.

Thanks a lot, I was already losing hope.

Always welcome.

Stanliwise, can I join your whatsapp group? Is it still active? Is there any local community you can also recommend for me? I feel alone in this deep pool of web dev.

ThreeBlackBird:
Stanliwise, can I join your whatsapp group? Is it still active? Is there any local community you can also recommend for me? I feel alone in this deep pool of web dev.

My whatsapp group isn't active anymore. I spend most of my time coding or tutoring. for now. my number is zero-eight-zero 72833073. You can ask my some questions. I will sure give you an answer in my free times.

stanliwise:
My whatsapp group isn't active anymore. I spend most of my time coding or tutoring. for now. my number is zero-eight-zero 72833073. You can ask my some questions. I will sure give you an answer in my free times.

Thanks a lot. God bless.