Can't get my columns inline


#1


https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_bass?link_content_target=interstitial_project


Having trouble with this simple task. I can't get my columns to be inline and not sure where in the CSS to get them to line up. The "Features" and "Download" button seem to be just under the logo. Any ideas?


    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    
    <div class="jumbotron">
      <div class="container">
        <div class="header">
          <div class="row">
            <div class=".col-md-3">
            	<img src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" width="106" height="75">
            </div>
            <div class=".col-md-9">
            	<ul>
                <li>Features</li>
                <li>
                  <a href="#" class="btn">Download</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>


html, body {
  margin: 0;
  padding: 0;
}

.container {
 	max-width: 1000px; 
}

.jumbotron {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  height: 560px;
}

.jumbotron .btn {
  background-color: #FF003D;
  border-radius: 0;
  border: 0;
  padding: 8px 30px;
  text-decoration: none;
}

.jumbotron ul {
  text-align: right;
  
}

.jumbotron li {
  color: #fff;
  display: inline-block;
  margin: 0 10px;
  font-weight: 50;
}

.jumbotron li a{
  color: #fff;
}

.header li {
  display: inline-block;
  margin-left: 13px;
  margin-bottom: 100px;
}


#2

when we give a class in html:

<div class="example">

we use a full stop (.) in css to tell css we are dealing with a class:

.example {}

but we don't have to include a full stop in the html code when giving a class


#3

So where in the code would I edit to make them lined up? It currently looks like this right now: http://d.pr/i/8d3P


#4

edit this line:

<div class=".col-md-3">

no need for full stop when adding classes in html. Because you added a full stop, the bootstrap css class is not recognized


#5

Ahhhh geez, didn't catch that. Thanks!


#6

now it should be good?


#7

Yep. It set correctly after fixing that typo :slight_smile:


#8

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