I am having an issue with an :after element. I am using it for an underline in a header. For some reason, it is disturbing the flow of the page. Instead of the title being at the top/centered, on my actual page the title is going into the text under it and aligned left.
This is what is looks like:
I was unable to replicate the issue within a fiddle or snippet, so I was wondering if there is anything within my code that may be causing this. The issue is arising in both Chrome and Firefox.
jsfiddle
.section {
padding: 70px 0;
height: auto;
position: relative;
}
.section-wrap {
margin: 70px 13%;
position: relative;
height: auto;
}
.section-main-title-wrap {
width: 100%;
display: block;
position: relative;
}
.section-main-title {
position: relative;
color: blue;
font-family: 'Muli', sans-serif;
font-size: 1.8rem;
width: auto;
display: inline-block;
padding: .625rem 0;
margin-bottom: 40px;
}
.section-main-title:after {
content: "";
width: 80%;
height: 3px;
background: #489aad;
bottom: 0;
position: absolute;
left: 10%;
}
#home-box-container {
width: 100%;
height: auto;
display: block;
}
.home-box {
border-right: 2px solid #CDCDCD;
width: 30%;
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.home-box:last-child {
border-right: none;
}
.home-box-title, .home-box-description {
color: #2c2b2c;
line-height: 1.4em;
}
.home-box-title {
margin-bottom: 25px;
font-family: 'Muli', sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
.home-box-description {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
<section class="section">
<div class="section-wrap">
<div class="section-main-title-wrap">
<header class="section-main-title text-center">HELLO</header>
</div>
<div id="home-box-container" class="total-center">
<div class="home-box">
<h3 class="home-box-title">Paradigm</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div><div class="home-box">
<h3 class="home-box-title">Structure</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div><div class="home-box">
<h3 class="home-box-title">Integration</h3>
<p class="home-box-description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</section>
Related
I'm trying to figure it out why margin top "0" doesn't work, as you can see on the code there's a white space between menu and section, I can only fix it by using negative values which I don't want to... anyone can help me out with this?
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
body {
margin: auto;
width: 50%;
}
header {
background-image: url("medimare5.png");
background-repeat: no-repeat;
background-size: 318px 175px;
width: 318px;
height: 175px;
margin-top: 10px;
}
menu {
background-color: #70acdd;
text-align: center;
padding: 2%;
border-radius: 2em 2em 0 0;
}
ul, li {
display: inline;
padding: 1%;
font-weight: bold;
}
li:hover {
border-bottom: 3px solid #FFF;
}
a {
text-decoration: none;
color: #FFF;
}
section {
background-color: #70acdd;
height: 100%;
padding: 2%;
margin-top: -1.7%;
display: inline-block;
}
footer {
background-color: #70acdd;
padding: 2%;
border-radius: 0 0 2em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>
Medimare
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<menu>
<ul>
<li>Inicio</li>
<li>Consultas</li>
<li>Conócenos</li>
<li>Contacta</li>
</ul>
</menu>
<section>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
<footer>
<p>Medimare 2020 © Todos los derechos reservados.</p>
</footer>
</body>
</html>
Maybe I should start using divs? I don't know..
Thank you everyone!
The problem when you set margin-top: 0 on the section is that the menu has bottom margin. If you set margin-bottom: 0 on the menu, it should work as you expect
I don't think this requires explanation
menu {
margin-bottom: 0;
}
I want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
I have a div which is horizontally and vertically centred in the viewport. So I know the content will always be accessible, I allow the page to scroll when the content is taller than the viewport.
This appears to work fine, however, I am using a background-image on the div with an overlay on the :before pseudo-element to fade out the background. At first the background scroll, which I was able to resolve with background-attachment: fixed. Now the problem I have is that the overlay div scrolls up along with the page, so the area 'below the fold' doesn't now have a darkened background.
I know this is down to the position: absolute but when I change the position to fixed the desired effect is achieved but the overlay then covers the vertical scrollbar - is there a way around this?
I know I could use an image already darkened but this is markup that is used elsewhere and is being reused, so I'd like to find a CSS solution if possible.
Thanks in advance!
Code example attached + a CodePen version (https://codepen.io/moy/pen/xxbwvdL) depending on your preference. :)
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
Urgh, why is it when you've been stuck on something then you post and instantly think of a solution (I think).
So basically, I changed height: 100vh to min-height: 100vh That seems to do the trick unless anyone can spot a problem with it. Attached snippet to reflect this.
You can tell I haven't coded for a year+ I guess :/
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
min-height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
try changing:
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
to
.masthead--fullbleed {
overflow-y: auto;
}
EDIT
Alternative is to attach the dark overlay to the body
.body:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
I am trying to align my avatar/logo with the website title (side by side). How would I accomplish this?
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>EXPERIENCE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3></h3>
</body>
Your <img> and <h1> tag cannot be aligned because <h1> is a block element.
By default, block elements are displayed below the previous html element (i.e. below your <img> here).
There are many possible solutions. A simple one could be to move the <img> tag inside the <h1>:
<h1><img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">JOSH BAKOS</h1>
Another solution is to set the h1 inside the #title to inline-block (this way you can also control their vertical-alignment):
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
#title * {
vertical-align: top;
}
#title h1 {
display: inline-block;
margin-top: 0;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>EXPERIENCE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3></h3>
</body>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>