I've encountered a challenge with my page where the content is not scrollable beyond the bar. Additionally, I'm looking to adjust the size of the image to fit the page perfectly without any gaps on the sides, and ensure that the text following the image is centered. Lastly, I'm facing an issue where the shopping cart and user icons are not clickable, despite being wrapped in <a> tags.
For reference, I want the image to occupy the entire width from left to right:
https://i.sstatic.net/UX76o.jpg
Unfortunately, there is no scrolling to view the entire content within the <P> tag.
https://i.sstatic.net/jg9BA.jpg
The CSS code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
z-index: 99;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
z-index: 99;
}
... // CSS code continued
The HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">About us</a></li>
<li><a href="">Product</a></li>
</ul>
... // HTML code continued
</div>