CODEWITHSUNDEEP
htmlcss
user7102017
user7102017

Reputation:

Can not get CSS to work but same file is working on other parts of page

I have a php/html file that I am trying to style but for some reason it is not working and I am lost because other styles on the CSS file are working fine.

Here is my header (include) file

    <!-- ========== VIEWPORT META ========== -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- ========== META TAGS ========== -->
    <meta name="description" content="Client and payment management in one place for freelancers and creative agencies.">
    <meta name="keywords" content="client relations management, payment management, software, mobile app, saas">
    <meta name="author" content="SeaitManageit">

    <!-- ========== FAVICON & APPLE ICONS ========== -->
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- ========== MINIFIED VENDOR CSS ========== -->
    <link rel="stylesheet" href="styles/vendor.css">
    <link rel="stylesheet" href="styles/main.css">

    <link rel="stylesheet" href="styles/features.css">
    <link rel="stylesheet" href="styles/sign-up.css">
    <link rel="stylesheet" href="styles/nav.css">


    <!-- ========== MODERNIZR ========== -->
    <script src="scripts/vendor/modernizr.js"></script>

Here is the include of the php/html file

<?php include_once("header-file.php") ?>

And finally the section I am working on but won't work right

<!-- ========== FEATURE NAVIGATION ========== -->
    <section class="se-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                  <div class="feature-nav">
                    <ul>
                      <li>Analytics</li>
                      <li>Clients</li>
                      <li>Expenses</li>
                      <li>Inbox</li>
                      <li>Invoice</li>
                    </ul>
                  </div> <!-- end feature-nav -->
                </div> <!-- end col-md-12 -->


            </div> <!-- end row -->
        </div> <!-- end container -->
    </section>

Forgot the css I am testing with

.feature-nav  {color: blue;}

Based off what I have provided can anyone find the issue? As I said the main.css file works mostly but does not work for this certain div or really any div I try and change. I have cleared my cache, used incog and used a different browser so it is not my browser in any way.

Upvotes: 0

Views: 47

Answers (1)

leigero
leigero

Reputation: 3283

Based on what you have provided, I would assume you have <ul> and <li> styles applied in your .css somewhere which will take precedence over any div styling.

IE: 

.feature-nav  {color: blue;}

ul li {
  color: red;
}

would style your list items red, not blue. Check for global list styles or consider changing your original blue font style to something more appropriate like:

.feature-nav ul li {color: blue;}

JSFiddle

Upvotes: 1

Related Questions