Newsroom css issues


#1

I have most of the page done however I am having trouble getting my menu options to display inline. Also my text in the supporting section should be black under Latest news & white under Upcoming News. Basically I need help sprucing up my CSS.


#2

Just going to copy and paste your code and comment on whatever parts are changed

HTML

 <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" width="215" height="50">
        <form class="search-form">
            <input type="text" placeholder="Search NewsRoom">
          <button type="submit" class="search-btn">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 class="date">November 7,2014</p>
            <h2><span>Introducing Bass</span></h2>
            <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h3>Latest News</h3>
            <ul>
              <li>November 5,2014</li>
              <h4><span>MOVE Launches in London</span></h4>
              <li>November 4, 2014</li>
              <h4><span>Introducing Excuriosn</span></h4>
              <li>November 2,2014</li>
              <h4><span>Improvements to Shutterbugg Arrive</span></h4>
            </ul>
          </div>
          <div class="col-md-4 sidebar">
            <h3>Upcoming Events</h3>
            <ul>
              <li>November 8-12, 2014,</li>
              <h4><span>Innovation Cloud 2014</span></h4>
              <li>November 21, 2014</li>
              <h4><span>LL Retrospective</span></h4>
              <li>December 5, 2014</li>
              <h4><span>M.O.N.E.Y. Launch Event</span></h4>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="container">
        <ul>
          <li>About</li>
          <li>Terms</li>
          <li>Send Feedback</li>
        </ul>
        <p class="pull-right">&copy 2014 NewsRoom</p>
      </div>
    </div>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  font-family: Lato, sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}
.header{
  background-color: #000;
  min-height: 80px;  
}
.header img{
  margin: 15px 0 0 0;
}
.search-form {
  float: right;
  margin: 25px 0 0 0;
}
.search-form input {
 background: transparent;
  border: 0;
 border-radius: 0;
 border-bottom: 1px solid #fff; 
  color: #fff;
  height: 30px;
  width: 240px;
}
.search-form input: hover, .search-form input: focus{
  border-bottom: 1px solid #1a77ff;
  outline: 0px;
}
.search-btn{
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #1a77ff;
  color: #fff;
  height: 30px;
  margin: 0 0 0 10px;
  padding: 0 10px;
}

.menu {
  background: #152230;
  
}
.menu ul.nav {
 list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul .nav li {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 20px;
  text-align: center;
}
.menu ul.nav li: hover, .menu ul .nav li .active{
  background: #1a77ff;
}
.menu ul .nav li a{
  color: #fff;
  margin: 0;
  padding: 0;
 
}
.menu ul .nav li a:hover{
  background: transparent;
}
.main {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg") no-repeat center center;
  height: 500px;
  background-size: cover;
}
.main .container .col-md-5{
  padding: 40px;
}
.main .container .col-md-5 p.date{
  color: #fff;
  font-size: 16px;
}
.main .container .col-md-5 h2{
  color: #fff; 
  font-size: 60px;
  margin: 20px 0;
}
.main .container .col-md-5 h2 span{
  border-bottom: 5px solid #1a77ff;
}
.main .container .col-md-5 p{
  color: #fff;
  font-size: 20px;
}

.supporting .row {
  margin: 50px 0;
}
.supporting .row .col-md-8 {
  background: #fff;
  padding: 20px 40px 40px 40px;
}
.supporting .row .col-md-4 {
  background: #152230;
  padding: 20px 40px 40px 40px;
}
.supporting .row .sidebar h3{
  color: #fff;
}
.supporting .row ul{
  list-style: none;
  margin: 40px 0 0 0;
}
.footer{
  background-color: #000;
}
.footer li{
  display: inline-block;
  list-style: none;
  margin: 20px;
}

I'm assuming that you want a horizontal nav bar, so I'll do that stuff first.
Edited code snippet

.menu {
 list-style-type: none; // You had list-style, but it's list-style-type
  margin: 0;
  padding: 0;
  overflow: hidden; //Just another helpful tag
}
.nav li {
  display: block;
/*  height: 40px; */
  height: 5%;
/*  line-height: 40px; */ This height seems ridiculous 
  line-height: 5px;
  margin: 0;
  float: left; // This lets it be a horizontal nav bar 
  padding: 0 20px;
  text-align: center;
  text-decoration: none; //Another helpful tag
}

You said that the upcoming events text was wrong, but you didn't give it it's own class.

     <h3>Upcoming Events</h3>
            <ul class="upcomingeventstext">
              <li>November 8-12, 2014,</li>
              <h4><span>Innovation Cloud 2014</span></h4>
              <li>November 21, 2014</li>
              <h4><span>LL Retrospective</span></h4>
              <li>December 5, 2014</li>
              <h4><span>M.O.N.E.Y. Launch Event</span></h4>
            </ul> ```

and then the css was just 
``` 
.upcomingeventstext {
 color: white;
}

The updated code can be found at


#3

list-style is more than adequate.

Least of all help is that comment.

As does the comment. 40px is less than half an inch. Nothing ridiculous about that.

How so?

Again, how so? This sort of vagueness is not helpful at all.

.menu ul.nav {
 list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul .nav li {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 20px;
  text-align: center;
}

The CSS is fine, but the selector is a bit off. In one, it is ul.nav and in the other, ul .nav which makes .nav a descendant. One that does not exist.

Examine the HTML...

    <div class="menu">
      <div class="container">
        <ul class="nav">

Since there are no other .menu class elements in the page,

.menu .nav

is specific enough to hook the UL, and,

.menu .nav li

is specific enough to hook the list items.