Help me find a bug in my code

HTML-CSS
1

Hi guys!
Please help me find a bug in my code. I can’t figure out why there is an indent between the second and third page (white row).
Because of this, I can’t move on.

See the Pen xWpLrZ by Elena Kazakova (@Novumel) on CodePen.

2

Hello,
try
display:table
or
overflow:hidden on #page2

but this is not a good solution… You have margin-bottom: 1 rem on p

1 Like
3

first, open your browser’s developer tool and inspect the element.
it’ll show that your <p> has margin-bottom: 1rem
now to solve it, uhm…i don’t know the best or proper way :T
i just usually add padding to the element’s parent div

.container-fluid {padding: 1px 0;}
1 Like
4

After tidying and cleaning your code.
I founded that your #page2 section is missing class="row"

Your code is

<h4 id="font2">About me</h4></div><div>

Correction

<h4 id="font2">About me</h4></div><div class="row">

Addtional cleanup
1. <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC|Swanky+and+Moo+Moo" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC|Swanky+and+Moo+Moo" rel="stylesheet">

2. <nav>

<nav class="navbar navbar-expand-md bg-light navbar-light sticky-top>

<nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">

Suggestion
1. alt in div; Instead of using alt inside <div> tag.

<div id="img-ava" class="border border-white rounded-circle" alt="my photo"></div>

<div id="my-photo" role="img" class="border border-white rounded-circle"></div>
or
<div id="img-ava" role="img" class="border border-white rounded-circle"></div>

I think id should describe specific item.

2. align in <div>; Using a class="text-center" which provided by Bootstrap.

<div id="meh" align="center"><i class="fa fa-meh-o"></i></div>

<div id="meh" class="text-center"><i class="fa fa-meh-o"></i></div>

3.  Using same id; You should use class instead.

<div class="well"><a class="btn btn-link" id="icon"
...fa-facebook-square"></i></a></div>
<div class="well"><a class="btn btn-link" id="icon"
...fa-free-code-camp"></i></a></div>
<div class="well"><a class="btn btn-link" id="icon"
...fa-envelope-o"></i></a></div>

<div class="well"><a class="btn btn-link icon"
...fa-facebook-square"></i></a></div>
<div class="well"><a class="btn btn-link icon"
...fa-free-code-camp"></i></a></div>
<div class="well"><a class="btn btn-link icon"
...fa-envelope-o"></i></a></div>

and change CSS Path

#icon{
...
}

.icon{
...
}

Hope this help. :slightly_smiling_face:

1 Like
5

Thank you so much! You really helped me a lot!