I have no idea where is the problem on the nav-pill issuue


#1

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bestbite

the button color shows blue instead of red!
I don't know where I can get the picture, because it does't work when i want to copy the url from the demo project

<div class="header">
    <div class="container">
    <div class="row">
        <div class="col-md-4">
                    <h1>Bestbite</h1>
        </div>
        <div class="col-md-4">
            <ul class="nav nav-pills">
                    <li class="active"><a href="#">About</a></li>
                    <li><a href="#">Sign up</a></li>
                    <li><a href="#">Log in</a></li>
            </ul>
        </div>

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Arvo', serif;
    font-size: 16px;
}

.container {
    max-width: 940px;
    margin: 0 auto;
}


/* Header */
.nav-pills li a {
    color: #d80001;
}
.nav-pills ul{
    list-style:none;
}
.nav-pills li{
    float:left;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
    background-color: rgb(216, 0, 11);
    box-shadow:0 2px 4px rgba(0,0,0,.5);
    color:#fff;


#2

Besides, I don't know why the words browse, create, share are still stay left?
I have tried source css code from the demo project, but it still don't work.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <div class="col-md-4">
                    <h2>Browse.</h2>
                    <h2>Create.</h2>
                    <h2>Share.</h2>
                </div>
        </div>
    </div>
</div>

/* Jumbotron */
/*.jumbotron {
    height: 500px;
    text-align: right;
    width: 100%;
    margin:0;
    background-image: url(#);
}*/
.jumbotron h2:first-child {
    margin:120px 0 0;
}
.jumbotron h2 {
    color:#fff;
    font-size: 60px;
    text-align: right;
    margin:0;
    width:100%;
}

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.