Custom.css isnt overwriting bootstrap.min.css - html

Question

When I include css/bootstrap.min.css it overwrites some elements of my site such as 'a' tags, my .nav bar and font used on 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">Sprawdź naszego Instagrama!</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>
Tu opis o pierciengu i cennik
</div>
<div style="clear:both"></div>
<div id ="option4">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
</div>
Tu opis o dreadach i dreadlockach
</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>
Mostly everything is good though few things are overwritten:
a tag is unedited,
logo changes text alignement,
text in nav goes lower and its not centered
Elements which are overwritten 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: middle;
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;
}
Its my first time making responsive site || using bootstrap.

Answer 1

If your CSS files are in public/css, you should write:
<link rel="stylesheet" href="css/custom.css">
When you write the href, the start folder is public. Read more about it here.
Also, you are missing an e on the 3rd line:
<link rel="stylesheet" href="styl.css"> -> <link rel="stylesheet" href="style.css">