<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text.html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<style>
body {
margin: 0;
}
#container {
width: 100%;
}
#headerBg {
width: 100%;
background-color: #ffffff;
}
#interior {
width: 100%;
margin: 0 auto;
}
#header {
width: 100%;
height: 85px;
}
#logo {
width: 200px;
height: 45px;
float: left;
display: inline-block;
margin-left: 40px;
margin-top: 40px;
}
#topNav {
width: 600px;
float: right !important;
color: #000000;
margin-right: 40px;
}
.topNavFont {
font-size:18px;
float: right;
font-family:sans-serif;
}
.social_youtube {
margin-right: 10px;
}
.social_facebook {
margin-right: 10px;
}
.social_twitter {
margin-right: 10px;
}
.searchbar {
width: 150px;
height: 30px;
margin-right: 40px;
font-size: 16px;
}
.button {
width: 130px;
height: 36px;
margin-right: 40px;
}
#bottomNav {
width: 870px;
float: right !important;
color: #000000;
margin-right: 40px;
margin-top: 10px;
}
.bottomNavFont {
font-size:1em;
color:#222;
float: right;
font-family:sans-serif;
}
.bottombutton {
width: 130px;
height: 35px;
}
#row {
margin-top: 30px;
}
img.team {
width: 1355px;
height: 650px;
margin-left: 45px;
margin-top: 5px;
}
img.leftarrow {
float: left;
width: 50px;
height: 50px;
margin-left: 40px;
margin-top: 55px;
}
div.pic {
width: 1450px;
}
img.lake {
margin-left: 30px;
}
img.battersea {
margin-left: 25px;
}
p.location {
display: inline-block;
margin-top: 5px;
margin-left: 20px;
padding-right: 100px;
}
p.battersea {
margin-left: 150px;
}
img.rightarrow {
width: 50px;
height: 50px;
margin-left: 15px;
margin-bottom: 70px;
}
#rows {
margin-top: 30px;
width: 1450px;
}
p.subtext {
display: inline-block;
width: 340px;
padding-right: 30px;
padding-left: 30px;
text-align: center;
margin-left: 20px;
margin-top: 5px;
}
p.juniors {
margin-left: 110px;
}
img.youth {
margin-left: 120px;
width: 383px;
}
img.regatta {
margin-left: 30px;
width: 383px;
}
img.rowathon {
margin-left: 32px;
width: 383px;
}
#story {
float: right;
width: 340px;
height: 300px;
margin-right: 150px;
margin-top: 50px;
}
#storytext {
margin-left: 115px;
margin-top: 50px;
height: 330px;
width: 1000px;
}
p.subheading {
width: 590px;
font-size: 19px;
font-weight: 600;
}
p.copy {
width: 790px;
height: 230px;
}
#footer {
margin-top: 70px;
height: 140px;
background-color: #0645be;
color: white;
font-size: 20px;
}
#leftside {
float: left;
margin-left: 45px;
text-align: left;
}
#rightside {
float: right;
margin-right: 35px;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div id="headerBg">
<div id="interior">
<div id="header">
<div id="logo">
<img src="https://www.britishrowing.org/wp-content/themes/britishrowing/assets/img/brand/br-logo-horizontal.png" height="45" alt="logo">
</div>
<div id="topNav">
<img class="topNavFont social social_instagram" src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png?w=300" alt="instagram logo" width="37" height="36">
<img class="topNavFont social social_youtube" src="http://pluspng.com/img-png/youtube-png-youtube-play-button-png-free-download-396.png" alt="youtube logo" width="40" height="35">
<img class="topNavFont social social_facebook" src="https://s18955.pcdn.co/wp-content/uploads/2017/11/Facebook-share-icon.png" alt="facebook logo" width="37" height="35">
<img class="topNavFont social social_twitter" src="http://stagewp.sharethis.com/wp-content/uploads/2019/03/twitterimg.png" alt="twitter logo" width="37" height="35">
<form class="topNavFont"><input class="searchbar" value="Search..."></form>
<button class="topNavFont button">SIGN IN</button>
</div>
<div id="bottomNav">
<button class="bottomNavFont bottombutton shop">SHOP</button>
<button class="bottomNavFont bottombutton events">EVENTS</button>
<button class="bottomNavFont bottombutton news">NEWS</button>
<button class="bottomNavFont bottombutton go">GO ROWING</button>
<button class="bottomNavFont bottombutton about">ABOUT US</button>
<button class="bottomNavFont bottombutton home">HOME</button>
</div>
</div> <!-- closing header tag here -->
<!---------------------------->
<!-- end header code here ---->
<!---------------------------->
<div id="content">
<img class="team" src="https://www.britishrowing.org/wp-content/uploads/2017/02/Paralympics_11_09_16_1235-e1486995505416.jpg" width="1340" height="570">
</div>
<div id="row">
<img class="leftarrow" src="https://image.flaticon.com/icons/png/512/21/21256.png" width="50" height="50">
<div class="pic">
<img class="lake battersea" src="https://media.timeout.com/images/102759833/630/472/image.jpg" width="175" height="170" alt="Battersea Park">
<img class="lake" src="https://leytonstonelondone11.files.wordpress.com/2011/10/hollow-pond-boats.jpg" width="175" height="170" alt="Hollow Pond">
<img class="lake" src="https://media-cdn.tripadvisor.com/media/photo-s/04/0d/dc/b6/boating-pond.jpg" width="175" height="170" alt="Dulwich Park">
<img class="lake" src="http://www.utrc.org.uk/wp-content/uploads/2014/01/MensEight2012-for-ROWING-SQUADS-ABOUT.jpg" width="175" height="170" alt="Upper Thames">
<img class="lake" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Regent%27s_Park_boating_lake_-_geograph.org.uk_-_21750.jpg" width="175" height="170" alt="Regents Park">
<img class="lake" src="https://i.pinimg.com/originals/57/63/cc/5763cc9831846834b8af799f748841c3.jpg" width="175" height="170" alt="Hyde Park">
<img class="rightarrow" src="https://image.flaticon.com/icons/png/512/20/20659.png" width="50" height="50">
<br>
<p class="location battersea">Battersea Park</p>
<p class="location hollow">Hollow Pond</p>
<p class="location dulwich">Dulwich Park</p>
<p class="location upper">Upper Thames</p>
<p class="location regents">Regents Park</p>
<p class="location hyde">Hyde Park</p>
</div>
</div>
<div id="rows">
<img class="youth" src="https://www.britishrowing.org/wp-content/uploads/2019/12/9-FRBC.png" alt="Youth Rowing Project" width="383">
<img class="regatta" src="https://www.britishrowing.org/wp-content/uploads/2019/07/England-Junior-Women-HIR2019.jpg" alt="International Womens Regatta" width="383">
<img class="rowathon" src="https://www.britishrowing.org/wp-content/uploads/2019/11/Ian-Jamieson-1600x900.jpg" alt="Charity Rowathon" width="383">
<br>
<p class="subtext juniors">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
<p class="subtext">Transformed Regatta Allows Cutting Edge International Rowing Competition</p>
<p class="subtext">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
</div>
<div id="story">
<img src="https://www.britishrowing.org/wp-content/uploads/2019/12/Shelagh-Allen.jpg" alt="Mary" width="375" height="300">
</div>
<div id="storytext">
<p class="subheading">Success for the older generation groups at the Mizuno British Indoor Rowing Championships</p>
<p class="copy">
Another keep fit enthusiast, who set herself the challenge of racing over 2000m, was Shelagh Allen. The 81-year-old, from West Byfleet in Surrey, was the oldest woman taking part in the Championships and the only competitor in the women’s 80-84 age group.
The former nurse, who finished in 10.42, took up indoor rowing at 58 and has since competed in many events, including the World Indoor Rowing Championships, and has held several British records.
She said: “I used to cycle but then tried indoor rowing and loved it.
I used to go five days a week but now go about three.
As long as I keep going I will keep doing it.
So many people say they are proud of me, which is great.”<br><br>
Her next major event will be the World Rowing Indoor Championships in Paris in February.<br>
In the meantime, the mother-of-two and grandmother-of-one will continue to go to the gym and power walk for an hour every morning with her husband Tom, 85.
The sprightly seniors impressed GB’s top para-rowers, who were also competing at the indoor championships, as part of the selection process for the Paralympics in Tokyo next year.
</p>
</div>
<div id="footer">
<div id="leftside">
<p>British Rowing, 6 Lower Mall, Hammersmith, London, W6 9DJ</p>
<p>Telephone: 020 8237 6700</p>
<p>Fax: 020 8237 6749</p>
</div>
<div id="rightside">
<p>Accessibility Statement</p>
<p>Privacy Policy and Cookies Policy</p>
<p>© Copyright 2019 British Rowing</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>As you would see, the header section, the story section and the footer section breaks.
The main content in the middle seems to have elongated, so I'm not exactly sure on how to fix this. I have tried to decrease the width of the images, to see if that would fix the problem, however, when I exit from 'inspect code' it makes the images 'lessen' in width and does not fit with the rest of the content on the page.
This is the fourth attempt, after having other parts of the site break.
