Your code is a nightmare to figure out exactly what you are trying to do. Your styles is not within the style tag, a div element follows the style closing, very poor indentation, your elements will never display properly.
I have modified your code to work as you expect, from what little information we got -
<!DOCTYPE html>
<html>
<head>
<title>Mayuri_Bake</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="all-content">
<nav id="navbar">
<a class="navbar-brand" href="#" id="logo">
Mayuri's Cake Bake
Delicious Homemade Cakes
</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
Category
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Birthday Cake</a>
<a href="#" class="dropdown-item">Chocolate Cake</a>
<a href="#" class="dropdown-item">Party Cake</a>
<a href="#" class="dropdown-item">Slice Cake</a>
<a href="#" class="dropdown-item">Cup Cake</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="icons">
<!--
</div>
</div>
</body>
</html>
Your style.css file -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Uchen', serif;
}
.all-content {
background: #2e1700;
}
#navbar {
background-color: #573818;
padding: 15px 0;
text-align: center;
font-weight: bold;
}
#logo {
font-size: 23px;
color: white;
text-decoration: none;
display: block;
}
.sub-text {
display: block;
font-size: 12px;
color: #fff;
}
.navbar-nav {
margin-top: 10px;
}
.nav-link {
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
margin: 0 15px;
transition: 0.5s ease;
text-decoration: none;
}
.nav-link:hover {
background-color: rgba(161, 109, 14, 1);
color: white;
border-radius: 5px;
}
.icons {
margin-left: 30px;
}
.icons img {
margin-left: 10px;
transition: 0.5s ease;
cursor: pointer;
}
.icons img:hover {
transform: translateY(-5px);
}
@media screen and (max-width: 330px) {
#logo {
font-size: 15px;
}
}