Question: I have a simple page with a single div, centred with margin: auto, and some text inside the div.

I set padding on the div to 30px on all sides. The div is set to a max-width of 700px.

When I resize the Chrome browser window it's behaving in an unexpected manner.

Page without resizing the window:

[![enter image description here](https://i.stack.imgur.com/mtoUe.png)](https://i.stack.imgur.com/mtoUe.png)

Page after resizing the window to two different sizes:

[![enter image description here](https://i.stack.imgur.com/SkcX3.png)](https://i.stack.imgur.com/SkcX3.png)

Note that the word "window" is cut off in the first size, due to the 30px padding, and the word "when" is cut off in the second size.

Here is what I want it to look like (I've photoshopped this to make it look right):

[![enter image description here](https://i.stack.imgur.com/w52ix.png)](https://i.stack.imgur.com/w52ix.png)

I want to keep the width set to 100% and the max-width property set to 700px so that it resizes for smartphones.

This can't be hard to do, I imagine, but I just can't seem to figure it out. I have tried googling it!

Here is the code:

```html
<html>
<body style="background-color: blue;">

<div style="background-color: white; width: 100%; max-width: 700px; 
            margin-left: auto; margin-right:auto; padding:30px">

 <p>This is some text but the problem is that its doing something strange when I resize the width of the window, and it is very, very annoying.</p>

</div>

</body>
</html>
```

Answer: 
You can try this:

```js
document.getElementsByClassName('btn-link')[0].click();

```

Or you can give the `<a>` tag an id and do this:

```js
document.getElementById('myId').click();

```
There are multiple ways to do this, but simply you can create a javascript function in a `<script>` tag at the bottom of the html page, and then tell the `<a>` anchor which function to call using the `onclick` attribute

```html
<ul>
  <li class="next">
      <a href="#" class="btn btn-link" onclick="doClick(this)">
          <img src="/images/arrow-right.png" alt="newer">
      </a>
  </li>
</ul>

<script>
  function doClick(elem) {
    console.log('clicked!', elem);
  }
</script>
```