Submenu href issues - html

Question

I am building a website application for a final course using Flask on an IDE.
I have a layout.html which I am borrowing as part of other html pages as well.
I have an issue with my submenu where only one href is clickable on the website and leads to the required html page, whereas the second href just return back to the index while having 302 redirection(seen on the debugger).
All the other links in my menu are working flawlessly, but I can't get to solve the issue.
Here is part of my layout.html
<nav class="navbar navbar-expand-md navbar-dark bg-dark border">
<a class="navbar-brand" href="/"><span class="red">Stock Portfolio Manager</span></a>
<button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
{% if session.user_id %}
<ul class="navbar-nav mr-auto mt-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/quote">Quote</a>
<a class="dropdown-item" href="/buy">Buy</a>
<a class="dropdown-item" href="/sell">Sell</a>
<a class="dropdown-item" href="/history">History</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Build a Portfolio
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="/about">About</a></li>
<li><a class="dropdown-item" href="/build">Build</a></li>
<div class="dropdown-divider"></div>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">User Guide</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/expected returns">Expected Returns</a></li>
<li><a class="dropdown-item" href="/risk models">Risk Models</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
</ul>
{% else %}
<ul class="navbar-nav ml-auto mt-2">
<li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
{% endif %}
</div>
</nav>
The href="/risk models" does the issues here but it's not because risk models.html has issues, because if I insert it instead of href="/expected returns" it will work fine.
Any help will be appreciated.