@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Lobster|Open+Sans+Condensed:300|Roboto+Condensed&display=swap');
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
body {
background-color: #e0e0d1;
}
nav.Top-Nav.container {
border-radius: 7px;
}
.Top-Nav {
display: flex;
padding: 5px;
background-color: #131930;
max-width: 1140px;
width: 100%;
margin: 0 auto;
min-height: 60px;
justify-content: space-between;
}
div.brandName {
font-family: 'Lobster', cursive;
font-size: 20px;
}
div.brandName span#cap {
font-size: 50px;
}
ul.List a {
font-family: 'Roboto Condensed', sans-serif;
}
div.brandName, ul.List a {
text-transform: uppercase;
color: #acaaaf;
}
span#frm-style {
font-family: 'Indie Flower', cursive;
color: cadetblue;
font-size: 25px;
}
ul.List {
display: flex;
text-decoration: none;
list-style: none;
margin-bottom: 0;
}
ul.List a {
padding-left: 10px;
padding-top: 34px;
}
.dropdown-icon {
display: none;
}
div.offer-note {
text-transform: uppercase;
text-align: center;
display: block;
}
div.offer-note1 {
text-transform: uppercase;
text-align: center;
display: block;
}
div.offer-note1 p {
margin: 0;
padding-top: 5px;
padding-left: 1px;
color: #629fa3;
font-size: 15px;
}
button.offer-btn1 {
background-color: cadetblue;
border-radius: 7px;
width: 180px;
height: 40px;
font-size: 15px;
margin-left: 23px;
}
div.offer-note p {
margin: 0;
padding-top: 140px;
padding-left: 15px;
color: #629fa3;
font-size: 15px;
}
span.click-offer {
font-size: 25px;
color: whitesmoke;
text-shadow: 3px 3px 5px black;
}
button.offer-btn {
margin-left: 98px;
background-color: cadetblue;
border-radius: 7px;
width: 100px;
height: 40px;
font-size: 20px bold;
}
button.offer-btn:hover{
background-color: #0f2729;
color: whitesmoke;
}
div.fish-toon4 {
width: 80%;
}
iframe.Fish-vid1 {
width: 90%;
height: 400px;
}
img.sec2-firstfish-pic {
display: block;
margin: auto;
cursor: pointer;
width: 70%;
height: 600px;
}
h1.about-me {
font-size: 70px;
display: block;
padding-left: 80px;
}
div.fishem img.fish-pic {
height: 80%;
max-width: 100px;
display: block;
margin-top: 50px;
}
/*############ COLUM ##################
.col-1{width:8.33%;}
....
...
....
col-12{width:100%;}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
row::after {
display: table;
clear: both;
content: "";
}
*/
/*##############MOBILE#################*/
@media only screen and (max-width: 375px) {
ul.List li a.nav-link {
list-style: none;
display: none;
}
ul.List.responsive li.show-responsive a {
list-style: none;
display: flex;
}
}
@media only screen and (max-width: 768px) {
ul.List li a.nav-link {
list-style: none;
display: none;
}
ul.List.responsive li a.nav-link {
display: none;
}
ul.List li dropdown-icon {
...
<!DOCTYPE html>
....
...
.....
<script type="text/javascript" src="farm.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
</body>
</html>I'm facing an issue with spacing on my webpage after applying styles to make it mobile responsive. The page now has excess space on the right side, causing it to scroll unnecessarily. I attempted to fix this by setting the height and width of html and body elements to 100%, removing margins and paddings, and adding overflow: hidden. This helped prevent scrolling to the right but disabled all scrolling functionality on the page. Any advice or solutions would be greatly appreciated.