On my website, I envisioned a photoshopped image featuring a SVG picture of a book on the left and a "navigation block" on the right. The navigation block consists of links that redirect to other pages but it's not displaying properly. You can view the current issue in this screenshot: https://i.stack.imgur.com/OTZQJ.png
My code currently looks like this:
<div id="custom-bg">
<div id="alpha-layer">
<div id="top-section">
<div id="book">
<img src="img/book.svg" width="100">
</div>
<!-- nav -->
<nav class="nav-bar">
<ul>
<li class="nav-button">
<a href="ada bio.html">Biographie</a>
</li>
<li class="nav-button">
<a href="site.html">Programme Ada</a>
</li>
<li class="nav-button">
<a href="babbage.html"> La machine de Babbage</a>
</li>
<li class="nav-button">
<a href="#">Exemple de progamme Ada</a>
</li>
<li class="nav-button">
<a href="bibliographie.html">Bibliographie</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
Here is an excerpt from my CSS file:
html,
body {
background-image: url("../img/bg32.svg");
padding : 0px ;
margin: 0px;
}
/* CSS styles omitted for brevity */
Any suggestions on what changes or additions need to be made in order to achieve the desired result?