CSS not working in CodePen

Question

This is a simple question and I'm sure someone will have the answer quickly within looking at it, but my css is not working and I'm not sure what I've done wrong! Any help appreciated!

The code is below, but the link to the codepen is http://codepen.io/benyaaalex/pen/BRBMeW?editors=1000

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <style>
    body {
      background-color: blue;
    }
    .container-fluid {
      margin: 5%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
  </div>
</body>

what is not working? if you're referring to the container-fluid not having background color, that's because there is no content inside it. — GvM
– GvM, Commented Apr 12, 2017 at 2:20
there is no content inside what you are styling. If you add text into the container-fluid div, you will get a result — Mike Diglio
– Mike Diglio, Commented Apr 12, 2017 at 2:21

akkatracker · Accepted Answer · 2017-04-12 02:21:51Z

4

There is no content inside the div you are trying to style, if you add some text and re-run you'll see that it works.

answered Apr 12, 2017 at 2:21

akkatracker

1,5173 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Difster · Accepted Answer · 2017-04-12 02:22:43Z

3

It works fine. But you're not going to get any background color, margin, etc. for your div until it actually has some content in it. An empty div has no visible properties in the DOM.

answered Apr 12, 2017 at 2:22

Difster

3,2802 gold badges24 silver badges32 bronze badges

Comments

Ousmane D. · Accepted Answer · 2017-04-12 02:34:29Z

my css is not working and I'm not sure what I've done wrong!

your CSS is not the issue.

there is no content inside the div tag hence you won't be able to see any change.
Also, you'll need the html tags.

<html>
    <head>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
      <style>
        body {
          background-color: blue;
        }
        .container-fluid {
          margin: 5%;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div class="container-fluid">
        What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </body>
</html>

Collectives™ on Stack Overflow

CSS not working in CodePen

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related