Navigation bar is broken after using bootstrap

I am building a website . The site is not completely build by bootstrap . Then I want to use bootstrap to make a simple form . After adding bootstrap the navigation bar is broken , it lost it's spacing and height and width and so on .

Here are some point to be noted 1. My nav bar is always stick on the top 2. I have changed all the id and class in my HTML file so , it doesn't conflict with any bootstrap class or id .

Header Code for HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="favicon.ico" type="image/icon">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1">
        <title>Iron Bull Responsive Restaurant Template</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/flexslider.css" type="text/css">   
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        <link rel="stylesheet" href="css/layout.css" type="text/css">
        <link rel="stylesheet" href="css/demo.css" type="text/css">




    </head> 

        <a id="Top"></a>
        <div id="nav-original">
            <div id="navitems-original">
                <div id="logo"><a href="#Top"><img src="images/logo.png"></a></div>
                <ul>
                    <li><a href="#Menu">WE OFFER</a></li>
                    <li><a href="#Specials">SPECIALTIES</a></li>
                    <li><a href="#Locations">Availability</a></li>
                    <li><a href="#Story">Story</a></li>
                    <li><a href="#Careers">Recipes</a></li>
                    <li><a href="#Events">Happenings</a></li>
                </ul>
            </div>
        </div>

Here is the CSS

#nav-original {
    background:url("../images/header.png") 50% 0 no-repeat;
    background-color:#1C1414;
    width:100%;
    z-index:110;
    position:fixed;
    text-align:center;
    box-shadow:0 0 5px #2a2a2a;
}

input {
    -webkit-appearance: none;
}

#navitems-original {
    width:1024px;
    height:50px;
    margin:0 auto;
    padding:20px 0px;
    transition: margin 0.15s ease-in 0s;
    position:relative;
}

#navitems-original ul {
    padding-top:12px;
    margin-left:280px;
}

#nav-original ul li {
    margin-right:0px;
    font-size:16px;
    display:inline;
    text-transform:uppercase;
    position:relative;
}

#nav-original a {
    text-decoration:none;
    outline:none;
}

#nav-original div#logo {
    position:absolute;
    top:0;
    border:none;
}

#nav-original ul li a {
    color:#B2B0B0;
    text-decoration:none;
    padding:18px 18px 6px 18px;
    outline:none;
    font-weight:normal;
    transition: color 0.2s ease-in 0s
}

#nav-original ul li a:hover, #nav ul li a.active {
    color:#C03118;
}

Solution

Bootstrap uses a global reset

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Your code is using box-sizing:content-box (which is the default, you don't need to set it). Since you'll mess up a multitude of styles, including the entire grid system, by removing this from Bootstrap, change your math on your non-bootstrap css.

Example

.myboxywox {
height:70px;
padding:10px 0;
}

Total height of 70px;

before you'd have to make that height: 50px because you had top and bottom 10px padding, with box-sizing: border-box you do not.