Formatting issue for mobile responsive github page using bootstrap - html

Question

Wondering how to fix the mobile version of my github page, which I made tweaking a bootstrap template. On the mobile version only, the navbar cuts off the top of the first image in my portfolio. I can't figure out how to fix it, I think the problem is in the navbar:
<!-- navbar-->
<header class="header">
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">CHLOE WATSON COLLAGE
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn ">Menu<i class="fa fa-align-justify"></i></button>
</div>
</div>
<div id="navigation" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="page-scroll">
WORKS
</li>
<li class = "page-scroll">
ABOUT
</li>
<li class="page-scroll">
CONTACT
</li>
</div>
</div>
</div>
</header>
Any help greatly appreciated! Thanks! I've also linked to my repository if the above code is not enough.
https://github.com/chloewatson/chloewatson.github.io/blob/master/index.html

Answer 1

fist thing you brand name CHLOE WATSON COLLAGE so long for mobile device remove letter spacing in mobile
#media (min-width:0px) and (max-width:767px) {
.navbar a.navbar-brand {
letter-spacing: 0;
}
}
i thing it's ok but if these not working then use second css add your css file in last line
#media (min-width:0px) and (max-width:767px) {
#portfolio {
padding-top: 121px;
}
.navbar a.navbar-brand {
letter-spacing: 0;
}
}