<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Build a Personal Portfolio Webpage</title>
<link rel="stylesheet" href="./rule/bootstrap-Normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top">
<nav>
<p class="container">
<a class="navbar-brand navbar-text navbar-left" href="#">Free Code Camp</a>
<ul class="nav navbar-nav navbar-text navbar-right">
<li><a href="#">about</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</p>
</nav>
</header>
<main>
<p class="container jumbotron">
<header>
<p class="intro-text">
<p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
<hr>
<span>
Web Developer - User Experience Designer - Graphic Artist
</span>
</p>
<img src="http://qlip.in/images/avatar.jpg" alt="666">
</header>
<p>
</p>
<p>
</p>
</p>
</main>
<footer>
</footer>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Not included.
Your header is set with navbar-fixed-top. In bootstrap, this will use position:fixed, causing the header to break away from the regular flow.
According to stacking context rules, positioned boxes are on top of non-positioned boxes in the stream, so you appear to be contained by them.
Usually in this case, you can use margin-top or padding-top to prevent it from being blocked.