Bestbite project

How can i align the heading and the

  • as requested?
    <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
    
        <div class="header">
          <div class="col-md-4"><h1>BestBite</h1> </div>
          <ul  style="list-style-type:none" class="nav-pills">
            <li role="presentation" class="active" ><a href="#">About</a></li>
              <li role="presentation" ><a href="#">Sign Up</a></li>   
                <li role="presentation" ><a href="#">Login</a></li>
             </ul>
              </div>
          <div class="container">
    
          </div>
          
        <div class="jumbotron">
          
          <div class="container">
    
          </div>
        </div>
    
        <div class="section banner">
          <div class="container">
            <h3>Always have the answer to "What's for dinner?"</h3>
          </div>
        </div>
    
        <div class="section">
          <div class="container">
          	<div class="page-header">
          	  <h3>Newest Contributions</h3>
          	</div>
            
          </div>
        </div>
    
        <div class="footer">
          <div class="container">
            
          </div>
        </div>
        
      </body>
    </html>
    
    .header{
      padding:40px;
    }
    .header .col-md-4 h1{
      top-margin:210px;
    }
    html, body {
    	margin: 0;
      padding: 0;
      font-family: 'Arvo', serif;
      font-size: 16px;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
    }
    
    
    /* Header */
    .nav-pills li{
      margin-top:30px;
      color:red;
      background-color:rgba(121,25,47,1);
      margin-top:30px;
      margin-right: 10px;
      right:50px;
      position:relative;
    }
    .nav-pills li a {
      background-color:white;
      box-shadow:0 2px 4px rgba(0,0,0,.5); 
      color:rgba(216,25,47,1);
      padding:15px;
      border: 1px red solid;
    }
    
    .nav-pills li.active a,
    .nav-pills li a:hover,
    .section .btn:hover {
      background-color:rgba(216,25,47,1);
      box-shadow:0 2px 4px rgba(0,0,0,.5); 
      color:#fff;
      text-decoration:none;
    }
    .nav-pills li a:hover{
        background-color:rgba(216,25,47,1);
    
    }
    
    /* Jumbotron */
    .jumbotron {
      height: 500px;
    }
    
    
    /* Banner */
    .banner, .supporting {
      text-align: center;
      padding-top: 40px;
    }
    
    .banner {
      background-color:#36343f;
      height:180px; 
      color: #fff;
    }
    
    /* Media Queries */
    @media (max-width: 680px) {
      .header h1 {
        margin-bottom: 50px;
        text-align: center;
        padding: 10px;
      }
      .nav {
        float: right;
        margin: 0 auto;
      }
      .banner {
        height: 220px;
      }
    
      .nav-pills li:first-child a  {
        margin-left: 0;
      }
    }
    
  • use pull-left and pull-right classes, they are pre-defined in bootstrap, you can just add them to the elements you want to float left and right

    1 Like