My site is experiencing some element overwriting when I include css/bootstrap.min.css, such as 'a' tags, the .nav bar, and fonts used on the site. Load order:
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="styl.css" type="text/css" />
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
html :
<div class="wrppr">
<div class="header">
<div class="logo">
<img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
<span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<ul>
list here
</div>
<div class="image">
<img src="tatofront.jpg" style="opacity: 0.6"/>
</div>
<div id="opis">
<p></p>
</div>
<div style="clear:both"></div>
<div id="option2">
<a href="#">
<div id="ig">
<i class="icon-instagram"></i>
</div>
<div class="txt">Check out our Instagram!</div>
</a>
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
<div style="clear:both"></div>
<div id ="option3">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px;">
</div>
Description about piercing and pricing here
</div>
<div style="clear:both"></div>
<div id ="option4">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
</div>
Description about dreads and dreadlocks here
</div>
<div id="option5">
<div class="logobot">
<img src="LOGO.png" style="height: 300px; width: 300px;">
</div>
<div style="clear:both"></div>
<div class="footer">
VOODOO DOLL INK
</div>
</div>
Most elements are displaying correctly, but a few are being overwritten:
the 'a' tag remains unchanged,
the logo text alignment is affected,
nav text shifts lower and is not centered.
Elements overridden by bootstrap.min.css in custom.css:
a {
color: white;
text-decoration: none;
display: block;
}
.logo
{
font-weight: bold;
vertical-align: middle;
width: 1000px;
font-size: 72px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.nav
{
padding: 10px;
width: auto;
border-top: 1px solid rgb(38, 38, 38);
border-bottom: 1px solid rgb(38, 38, 38);
top: 0px;
z-index: 100;
height: 40px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
background-color: #0a0a0a;
}
This is my first attempt at creating a responsive site or using bootstrap.