(Oops! Accidentally clicked on the post button too soon)... Looks like there was no CSS for the image or H1 element in your code. I went ahead and added some CSS, including a max-width property for the image in both the main CSS and responsive (media) CSS.
There are still some adjustments that could be made, but I recommend taking a closer look and customizing it to fit your specific requirements. It seems to be closer to what you're aiming for!
UPDATE: I suggest incorporating more media queries to cater to various screen resolutions since absolute positioning can be tricky on devices with different sizes. You can use tools like Screenfly to test how your layout appears on multiple screens. When setting heights, avoid using large pixel-based margins (e.g., 360px), as this might cause elements like buttons to not display correctly. Instead, consider using vertical height (vh) or percentages. The [calc function] and CSS centering techniques like margin : 0 auto or text-align:center; can also come in handy.
Good luck, and I hope this guidance proves helpful!
h1 {
text-align: center;
font-weight: bold;
font-size: 1.8em;
}
img {
max-width: 70%;
max-height: 80%;
margin: 10px 12%;
}
img-wrapper {
display: inline-block;
position: relative;
}
nav {
margin: 0 auto;
}
nav ul {
list-style-type: none;
background-color: lightgrey;
width:100%;
}
nav ul li {
min-width:18%;
display: inline-block;
text-align: center;
padding: 10px;
margin:0 auto;
}
ul li a {
padding: 10px 15px;
text-decoration: none;
}
/*.img-responsive {
/* margin-top: 100px;
margin-left: 360px;
}*/
a.btn {
display: inline-block;
padding: 0.2em 1.45em;
margin: 0.1em;
border: 0.15em solid #CCCCCC;
box-sizing: border-box;
text-decoration: none;
font-family: 'Segoe UI', 'Roboto', sans-serif;
font-weight: 400;
color: #000000;
background-color: #ffc966;
text-align: center;
position: relative;
}
a.btn:hover {
border-color: #7a7a7a;
}
a.btn:active {
background-color: #999999;
}
@media all and (max-width:30em) {
img {
max-width: 400px;
}
a.btn {
display: block;
margin: 0.2em auto;
}
}
<h1>De zakelijke VR/AR hardware leverancier van Benelux</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="img-wrapper">
<img class="img-responsive" src="https://gilsig.ca/wp-content/uploads/2015/10/12391435_192385974441516_971157875868647436_n.jpg-North-Shore-Mountains-Dec-2015.jpg">
</div>
<a href="#" class="btn">Meer Info</a>