two css files are conflict

Question

My CSS3 Menu Bar is conflicting with the bootstrap.min.css

If I remove the bootstrap css then menu bar looks like below

Once bootstrap menu is added then it become like below

Instead of alphabet letters such as Menu1, Menu2, I m using some images on the menu. Because of CSS conflict, menu images comes below the menu border line. I got the image like below (but I want the image should be in center)

<link rel="stylesheet" type="text/css" href="Style/css3menu1/style.css" />
<link href="Style/vTab/bootstrap.min.css" rel="stylesheet" />

I have linked the both css like above and copied those codes in jsfiddle. I could not find the conflicting part in the CSS. Can anyone please help me. jsfiddle sample is here... https://jsfiddle.net/w3jz075t/

Answer 1

The order in which you include your CSS files is important, they will load in that order.

If there's 2 lines that impact the same html element, the browser will take the one included last (except if you use the attribute !important).