how to remover horizontal scroll bar without overflow:hidden property? - html

Question

I am learning css myself right now. I made this webpage:
https://codepen.io/manu506/project/editor/DQyMvM
/*************************************************************/
/* BASIC SETUP */
/************************************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #000000;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 18px;
text-rendering: optimizeLegibility;
}
/*************************************************************/
/* REUSABLE COMPONENTS */
/************************************************************/
.row {
width: 1140px;
margin: 0 auto;
}
h1 {
font-family: 'Merrriweather', serif;
font-weight: 900;
font-size: 500%;
}
h2 {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 200%;
}
h3 {
font-family: 'lato', 'arial', sans-serif;
font-weight: 900;
font-style: italic;
}
p {
font-family: 'lato', 'arial', sans-serif;
font-weight: 400;
font-size: 130%;
}
.btn {
display:inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border: 1px solid #0f0f0f;
color: #0f0f0f;
transition: background-color 0.3s, color 0.3s;
}
.btn:hover, .btn:active {
background-color: #0f0f0f;
color: #ffffff;
}
.btn:visited {
background-color: #0f0f0f;
}
/*************************************************************/
/* Navigation */
/************************************************************/
/* Header Background */
header {
background-image:linear-gradient(#000000dc, #000000dc), url(https://image.ibb.co/irJBJz/header.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* Logo */
.logo {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 250%;
color: #fff;
display: inline-block;
position: absolute;
left: 2%;
}
/* Navigation Menu */
.nav-menu {
float: right;
list-style: none;
position: absolute;
right: 2%;
top: 0%;
}
.nav-menu li {
display: inline-block;
margin: 30px;
}
.nav-menu li a:link,
.nav-menu li a:visited {
color: #fff;
text-decoration: none;
padding: 4px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.5s;
}
.nav-menu li a:hover,
.nav-menu li a:active {
border-bottom: 2px solid #fff;
}
/* Header Mid Text Box */
.text-box {
position: absolute;
width: 100%;
color:#fff;
text-align: center;
top: 25%;
}
/******** Section 1 *************/
.section1 {
margin-top: 8%;
}
.section1-text {
margin-top: 25%;
}
.section1-text h2 {
font-size: 350%;
}
.section1-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section1-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section1-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/* *********** Section 2 ************ */
.section2 {
margin-top: 10%;
width: 100%;
}
.section2-text {
width: 33.33%;
margin-top: 10%;
}
.section2-text h2 {
font-size: 350%;
}
.section2-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section2-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section2-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 3 *************/
.section3-text {
display: block;
margin-top: 18%;
}
.section3-text h2 {
font-size: 350%;
}
.section3-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section3-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 105px;
margin-top: 5px;
margin-bottom: 5px;
}
.section3-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 4 *************/
.section4 {
margin-top: 8%;
}
.section4-text {
margin-top: 18%;
}
.section4-text h2 {
font-size: 350%;
}
.section4-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section4-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 100px;
margin-top: 5px;
margin-bottom: 5px;
}
.section4-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 5 *************/
.section5 {
width: 100%;
margin-top: 8%;
}
.section5-img {
padding-left: 10%;
}
.section5-text {
width: 33.33%;
margin-top: 14%;
}
.section5-text h2 {
font-size: 350%;
}
.section5-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section5-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 187px;
margin-top: 5px;
margin-bottom: 5px;
}
.section5-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 6 *************/
.section6 {
margin-top: 11%;
text-align: center;
}
.section6 span {
display: block;
font-size: 70%;
}
.section6 h3 {
margin: 2%;
font-size: 200%;
}
.section6 p {
display: block;
padding-top: 25px;
padding-bottom: 25px;
}
/******** Section 7 *************/
.section7 {
margin-top: 8%;
margin-bottom: 8%;
width: 100%;
background-color: #161616;
text-align: center;
}
.section7-services {
margin: 0;
}
.blur-image1 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/m9q2Qe/services.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image1:hover {
opacity: 1;
}
.service-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
.section7-work {
margin: 0;
}
.blur-image2 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/muF2Qe/work.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image2:hover {
opacity: 1;
}
.work-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
I used https://www.dtelepathy.com/ as an inspiration for the design. But I am not able to achieve the same result. If you look at css and html, from section 1 to section 7, all images are going out of browser boundary. If I use overflow:hidden property, then my images are being cropped out, which I don't want. Can you please help me out?
I am using this grid system: http://www.responsivegridsystem.com/

Answer 1

Add these properties to img tag
img {
width: 100%;
height: auto;
font-size: 0;
}
If the width property is set to 100%, the image will be responsive and scale up and down:

Answer 2

Use this code:
This CSS Style is used to be make width of the scroll bar "0"
So we can hide the scrollbar without overflow hidden.
::-webkit-scrollbar { width: 0px;}