咱们逐个拆解这些问题，直接给你能用的修改方案：

问题1：导航栏后页面内容无法滚动查看全部P标签内容 #

问题根源：header和bar都是position: fixed定位，这类元素会脱离文档流，不占用页面空间。你原来给body只设了margin-top:20px，远小于两个导航栏的总高度（80px+43px=123px），导致顶部内容被导航栏挡住；另外固定定位的footer也会遮挡底部文本。

修改方案：
给body设置足够的内边距，避开顶部导航和底部 footer：

body{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0; /* 删掉原有的margin-bottom，改用padding-bottom */
  margin-top: 0; /* 删掉原有的margin-top，改用padding-top */
  overflow: auto;
  width: 80%;
  padding-top: 130px; /* 略大于导航栏总高度，避免内容被遮挡 */
  padding-bottom: 110px; /* 略大于footer高度，保证底部文本能显示 */
}

同时给bar加上top:80px，避免和header重叠：

.bar{
  width: 100%;
  height: 43px;
  background: url(images/menu-boarder.jpeg);
  flex-flow: row wrap;
  align-items: center;
  position: fixed;
  z-index: 99;
  top:80px; /* 新增：让bar紧贴在header下方 */
}

问题2：导航栏后的图片无法适配页面宽度，存在左右间隙 #

问题根源：.container设置了max-width:400px，直接限制了图片容器的最大宽度，导致图片无法铺满body的80%宽度。

修改方案：
删掉.container的max-width限制，让它继承父元素宽度：

.container {
  position: relative;
  width: 100%;
  /* 删掉 max-width: 400px; 这一行 */
}

你已经给.banner img设置了width:100%，这个保留即可，图片会自动铺满容器。

问题3：图片后的文本需居中对齐 #

问题根源：虽然你加了.centered-element类，但<p>标签的文本对齐可以更明确，另外你用的<center>标签已经被废弃了，建议用CSS控制。

修改方案：
更新.centered-element的样式，给段落文本明确设置居中：

.centered-element{
  text-align:center;
  width:100%; /* 确保容器铺满body的宽度 */
}
.centered-element p{
  text-align:center; /* 强制段落文本居中 */
}

同时删掉HTML里<h4>中的<center>标签，用CSS实现对齐：

<div class="centered-element">
  <h4><u><mark class="mark_colour">Welome to our Bakery shop!</mark></u></h4>
  <p>
    Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at tellus tincidtant tristique.
  </p>
</div>

问题4：购物车和用户图标使用标签但无法点击 #

问题根源：这是个低级拼写错误！你把<a>标签的href属性写成了herf，浏览器无法识别这个错误属性，所以标签没有跳转功能。

修改方案：
修正HTML里的拼写错误：

<div class="icons">
  <a href="xx.html" ><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
  <asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
  <a href="" ><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>

把所有herf改成正确的href即可。

内容的提问来源于stack exchange，提问作者Meme Mohammad