Q 8.8 On the same line CSS?


I can't find in CSS the code for "on the same line"?


Hi @arcjumper93165,

I think the instructions want you to modify the same line as you were before.

Please post a link to the exercise if you still need help :slight_smile:


I code it current like this:

 <div class ="on_line">
         <p> Work</p>

I want to define the class in CSS so that he take all on the same line. Is it right or do I make a general failure



As Per Your Need You Need to Give the CSS to Your Class that would be Defined into the Div Tag right?
ok, So you need to Write a code like this,

		<title>Demo page</title>
				// write your CSS here..
		<div class ="on_line">
			 <p> Work</p>

Into Your Case You have defined a class but you need to Defined A CSS into Tag.

Divyesh Padamani


Maybe I have to provide the code of the header and also in css so that for you everything is clear what's my problem

  <div class="header">
      <div class ="on_line">
        <p> Work</p>


.on_line {
  text-align: center;
  float: none;

what should I change in the css file that everything is on one line.


@arcjumper93165 I don't believe that's a good way to handle it, would you please post a link to the exercise?




@arcjumper93165 OK, the instructions say:

In app/views/pages/home.html.erb in the header, add four list items for About, Work, Team and Contact.

That means that inside <div class="header"> and it's container <div class="container">, you'll add your code. Since the instructions mention list items, it will probably be best if we use a list:

<div class="header">
  <div class="container">
    <!-- this is our code: -->
    <!-- end of our HTML code for this step -->

Now, the next part of the instructions say this:

Write CSS in app/assets/stylesheets/pages.css.scss to display them on the same line.

So we'll open up our stylesheet and make those list items display on the same line (I recommend taking the Learn HTML & CSS course if you don't know how to do this).

The easiest way is to make all list items on the page display inline:

li {  display: inline; }

If you want, you could use a descendant selector like .header li or apply a class to each <li> you want displayed on the same line, such as .display-inline :slight_smile:


This topic is solved.