Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Michael Hampshire
Michael Hampshire
12,206 Points
Posted by Michael Hampshire
Michael Hampshire
12,206 Points

I'm trying to adjust the space between my navbar and my content using Bootstrap

I'm trying to adjust the space between my navbar and my content. On the bottom of the navbar there is 20px of space but I can't adjust it or anything? Am I doing something wrong? Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Mike Hampshire | Web Developer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top nav-container">
        <div class="container">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="about2.html">About Me</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact Me</a></li>
            </div>
        </div>

        <div class="container-fluid">
        <div class="row">
            <p class="about-paragraph-1 col-md-4">Names Michael but most people just call me Mike and welcome to my portfolio! I'm striving to become a web developer due to my passion for web design and software development. About to graduate with my Bachelors in computer programming and I can't wait to jump-start my new career! So go ahead, feel free to look around, check out some of my work and if you have any questions at all, feel free to contact me. Thanks for looking!</p>
        </div>
        </div>

        <div class="row">
            <div class="navbar navbar-default navbar-fixed-bottom">
                <div class="container main-footer">
                    <p class="navbar-text">&copy; Mike Hampshire 2017</p>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>

Here is my CSS:

.main-footer {
    font-family: 'Amatic SC', cursive;
    font-size: 25px;
    font-weight: bold;
    background-color: rgba(141, 139, 141, 0.35);
    text-align: center;
    width: 100%;
    padding-bottom: 0;
}

body {
    padding-top: 65px;
}

li {

}

.nav-container {
    padding-bottom: 0;
}

.navbar-brand {
    font-family: 'Amatic SC', cursive;
    font-weight: bold;
    font-size: 25px;
}

.navbar-text {
    float: none;
}

1 Answer

codingchewie
codingchewie
8,764 Points
codingchewie
codingchewie
8,764 Points

think your space from navbar is caused from:

body {
    padding-top: 65px;
}