Display of the Search Button


#1



Hello guys!
I have a little problem with my Newsroom Project. I can't make my Search button in my Inline form to display exactly on the same line with the search field.


Any manipulations with top margin or other give no results:(
It is not so important, just curious why it is so.


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" class="logo"/>
          <form class="form-inline pull-right">
            <div class="form-group">
              <input type="text" class="form-control" id="search" placeholder="Search NewsRoom">
            </div>
            <button type="submit" class="btn-search">Search</button>
          </form>
      </div>
   	</div>
    <div class="menu">
      <div class="container">
        <ul class="nav">
          <li class="active"><a href="#">Top Stories</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Entertainment</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Health</a></li>
       	</ul>
      </div>
   	</div>
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-5">
            <p>November 7, 2014</p>
            <h2><span>Introducing Bass</span></h2>
            <p>A new app by the creators of<br> Shutterbugg that lets you enjoy your <br>favorite music everywhere you go.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="supporting">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h2>Latest News</h2>
            <p class="date">November 5, 2014</p>
            <h3><span>MOVE launches in London</span></h3>
            <p class="date">November 4, 2014</p>
            <h3><span>Introducing Excursion</span></h3>
            <p class="date">November 2, 2014</p>
            <h3><span>Improvements to Shutterbugg Arrive</span></h3>
          </div>
          <div class="col-md-4">
            <h2>Upcoming Events</h2>
            <p class="date">November 8-12, 2014</p>
            <h3><span>Innovation Cloud 2014</span></h3>
            <p class="date">November 21, 2014</p>
            <h3><span>LL Retrospective</span></h3>
            <p class="date">December 5, 2014</p>
            <h3><span>M.O.N.E.Y. Launch Event</span></h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg"/></a>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="container">
        <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Send Feedback</a></li>
            </ul>
       <p class="pull-right">&copy 2014 Newsroom</p>
          </div>
        </div>        
  </body>
</html>


html, body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
}

.header {
  background-color: black;
  padding: 20px 50px;
}

.header img {
  height: 50px;
  width: 210px;
}

#search {
  background: transparent;
  text-align: left;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid white;
  width: 250px;
  margin: 0 15px;
}

#search:hover {
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #1A77FF;
}

.form-group input {
  padding: 0;
  margin-left: 0;
  color: white;
}

.btn-search {
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #1a77ff;
  color: #fff;
  font-size: 13px;
  padding: 0 10px;
  margin-top: 15px;
}

.menu {
  width: 100%;
  background-color: #152230;
}

.nav li {
  display: inline-block;
}

.nav a {
  color: #fff;
}

.nav>li>a:hover {
  background-color: #1A77FF;
}

.nav li.active {
 	background-color: #1A77FF;
}

.main {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 40px 0 0 100px;
  color: white;
  height: 500px;
}

.main h2 span {
  font-size: 60px;
  margin: 20px 0;
}

.main h2 span {
  font-family: 'Montserrat', sans-serif;
  border-bottom: 5px solid #1A77FF;
  font-weight: bold;
}


.main p:first-child {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
}

.main p {
  font-size: 20px;
}

.supporting {
  background-color: #F2F2F2;
  padding: 30px 70px;
}

.supporting .col-md-8 {
  background-color: white;
  padding: 30px 30px;
}

.supporting .col-md-4 {
  background-color: #152230;
  padding: 30px 30px;
  color: white;
}

.container h2 {
  margin-bottom: 30px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
}

.container .row {
  margin: 50px 0;
}

p.date {
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin-bottom: -10px;
}

.row h3 span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 5px solid #1A77FF;
}

.row h3 {
    margin-top: 20px;
}

.row img {
  padding: 0;
  margin: 0 0 0 -13px;
}

.footer {
  background-color: black;
  padding: 30px 40px;
  color: white;
}

.footer li {
  display: inline;
}

.footer a {
  text-decoration: none;
  color: white;
  margin: 0 20px;
}

.footer p {
  display: inline;
  margin-top: -25px;
}


#2

In your .css file change the line in #search

write

margin-bottom:15px;

instead of

margin: 0 15px;


#3

Thanks! That helped:blush:


#4

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