Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,763 Points

think your space from navbar is caused from:

body {
    padding-top: 65px;
}