Sherri Sherri - 1 month ago 7
CSS Question

When step am I missing from moving a premade code from Codepen into my Brackets project?

Here is the codepen I'm trying to get working: http://codepen.io/Bounasser-Abdelwahab/pen/ruiky

Here is the head of my index.html file in my Brackets project:

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>


When I try to run this, it runs about 90% correctly, but it's not a complete match. The menu is misaligned, and I can see bullet points that weren't there before, and the padding is all wrong.

How can I get a complete replication of the codepen code into my own project?

Edit: here is an image of how mine is coming out: http://i.imgur.com/F3o0yQF.png

Edit 2:

Here is my slightly modified HTML. Problem is persisting.

<!DOCTYPE html>
<!--

-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>



<body>

<ul class="navbar cf">
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">sub item 1</a></li>
<li><a href="#">sub item 2</a></li>
<li><a href="#">sub item 3</a>
<ul>
<li><a href="#">google</a></li>
<li><a href="">yahoo!</a></li>
<li><a href="">jQuery</a>
<ul>
<li><a href="#">sub sub item 1</a></li>
<li><a href="#">sub sub item 2</a>
<ul>
<li><a href="#">sub sub sub item 1</a></li>
<li><a href="#">sub sub sub item 2</a></li>
<li><a href="#">sub sub sub item 3</a>
<ul>
<li><a href="#">sub item 1</a></li>
<li><a href="#">sub item 2</a></li>
<li><a href="#">sub item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">sub sub item 3</a></li>
<li><a href="#">sub sub item 4</a></li>
<li><a href="#">sub sub item 5</a>

</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">item a little longer</a></li>
</ul>
</li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>





</body>
</html>

Answer

Here is the class which will resolve those issues:

`ol, ul { list-style: outside none none; }`
Comments