Dasmoto's Arts and Crafts Question

I noticed something pretty interesting when working on the Dasmoto’s Arts & Crafts project.

When I finished the project and shrunk the size of my browser window, I noticed that the heading overflows:

As an experiment, I changed the width of the body, and the problem went away. However, when I specified a body width the images scaled up! :sweat_smile:

Can someone please help me understand what’s going on? By specifying a width did I override some defaults?

Thanks in advance!

Here’s what the header looked like after the 700px body width styling:

Please, can you post your code.

Hi dj,

Sorry for the delayed response. Here are my HTML and CSS code:

<!DOCTYPE html>
    <title>Dasmoto's Arts & Crafts</title>
    <link href="resources/css/index.css" type="text/css" rel="stylesheet">
      <h1>Dasmoto's Arts & Crafts</h1>
      <h2 class="brushes">Brushes</h2>
        <h3>Hacksaw Brushes</h3>
        <img src="resources/images/hacksaw.jpeg" alt="Hacksaw brushes">
          <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="base-pricing">Starting at $3.00 / brush.</span></p>
      <h2 class="frames">Frames</h2>
        <h3>Art Frames (assorted)</h3>
        <img src="resources/images/frames.jpeg" alt="artwork frames">
          <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="base-pricing">Starting at $2.00 / frame.</span></p>
      <h2 class="paint">Paint</h2>
        <h3>Clean Finnish Paint</h3>
        <img src="resources/images/finnish.jpeg" alt="finnish paint tubes">
          <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="base-pricing">Starting at $5.00 / tube.</span></p>
body {
  width: 700px;

h1 {
  font-family: Helvetica;
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  background-image: url("../images/pattern.jpeg");
  text-align: center;

h2 {
  font-family: Helvetica;
  font-size: 32px;
  font-weight: bold;
  color: white;

h3 {
  font-family: Helvetica;

p {
  font-family: Helvetica;

.brushes {
  background-color: mediumspringgreen;

.frames {
  background-color: lightcoral;

.paint {
  background-color: skyblue;

.base-pricing {
  font-family: Helvetica;
  font-weight: bold;
  color: blue;