What\'s the code to acheive this for my HTML document: • No horizontal scroll ba

ID: 3574539 • Letter: W

Question

What's the code to acheive this for my HTML document: • No horizontal scroll bars at viewport widths down to 720px
• No content (images, tables) that break through their containers because they're too big
• No long lines of text (super-wide, un-constrained paragraphs) at widths greater than 1000px
Basically no matter how much I zoom, the horizontal bar should not appear.

Link to the html document: http://urcsc170.org/ibashir/project2/index.html
You can see the html source by clicking the source option.

Below is the css code I used:

body {

background: linear-gradient(to bottom, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%);

color: black;
font-family: Georgia, Verdana, Arial;

}

h1 {

border-bottom-style: solid;
border-width: 2px;
border-color: #AD235E;
display: inline;
position: relative;
letter-spacing: -2px;
color: rgba(0,0,255,0.5);

}

.stitched {
padding: 25px;
margin: 12px;
background: 4DCFDA;
color: #fff;
font-size: 18px;
font-weight: normal;
line-height: 1.2em;
border: 2px dashed #fff;
border-radius: 11px;
box-shadow: 0 0 0 5px #ff0030, 3px 2px 5px 3px rgba(11, 10, 0, 0.5);

}

h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 25px; font-weight: 200; line-height: 40px; margin: 0 0 10px; text-align: left; }

p { color: black; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5000; margin-bottom: 15px; }

a { color: #fff; text-decoration: none; }

a:hover { color: #a03c21; }

figure {
float: right;
margin-left: 50px;
margin-right: 50px;
}

ul {
padding-left: 40px;
}

.container {
display: flex;

}

a:visited { color: #93291b; text-decoration: underline; }

aside {

padding-left: 40px;
padding-right: 20px;
top: 20px;
border: 1px solid red;
position: relative;
}

article {
padding-left: 30px;
   padding-right: 20px;
   border: 2px;
   position: relative;
}

footer {

padding-left: 40px;
   padding-right: 20px;
   padding-bottom: 30px;
   top: 20px;
    border: 1px;
   position: relative;

Explanation / Answer